Javascript jQuery：隐藏一个div。单击按钮后，显示该div并隐藏另一个div

我的理念是： 有

div-1

和

div-2

<代码>div-2将被隐藏，并显示

div-1

。在显示的

div-1

中有一个

按钮。单击
按钮后，将隐藏
div-1
，并显示
div-2

这是我的代码：



报告可疑药物
下一个
报告
$（文档）.ready（函数（）{
$（“.user information”）.hide（）；
$（“.btn”）。单击（函数（）{
$（“.medicine information”）.hide（）
$（“.user information”）.show（）
});
});

但是代码不起作用：/请帮我更正代码。
您有一些打字错误。快速修复

替换

  $("medicine-inforamtion").hide();
   $(".user-information").show();

与

请使用：-

$(".medicine-inforamtion").hide();

类名不同
在选择器中使用“.”选择一个类
在第一个div.中使用表单操作。。这样页面就会刷新。您得到了与textarea相同的页面。尝试使用Ajax
Onclick
JQuery内置了一个切换方法。基本上，首先将要隐藏的div设置为“display:none；”然后单击按钮在可见和隐藏之间切换


$（文档）.ready（函数（）{
$（“#切换”）。单击（函数（）{
$（“#div1”）.toggle（）；
$（“#div2”）.toggle（）；
});
});
。隐藏{
显示：无；
}
#第一组{
颜色：红色；
边框：1px纯黑；
}
#第二组{
颜色：蓝色；
边框：1px纯黑；
}

你好

世界

切换
问题在于，如果使用
而不设置显式类型，则表单将自动提交

一个简单的解决方案：

<button class="btn" type="button">Next</button>

下一步

这将导致按钮没有默认行为，因此您可以处理单击事件，而无需担心表单将提交

当前代码仅在第一次单击时有效（一个div将隐藏，另一个显示）。但是在那之后单击将继续将已经隐藏的div设置为hidden，而show将继续显示。幸运的是，jquery有一种显示是否隐藏和显示是否隐藏的方法。拨动

$(document).ready(function(){
    $(".user-information").hide();
    $(".btn").click(function(){
        $(".medicine-information").toggle()
        $(".user-information").toggle()
    });
});

将jquery链接放在脚本的正上方

请替换此：-

<button class="btn">Next</button>
<button type="submit" class="btn">Report</button>

下一步
报告

与：-

<button type="button" class="btn">Next</button>
<button type="button" class="btn">Report</button>

下一步
报告

因此，请尝试以下代码：-



报告可疑药物
下一个
报告
$（文档）.ready（函数（）{
$（“.user information”）.hide（）；
$（“.btn”）。单击（函数（）{
$（“.medicine information”）.hide（）
$（“.user information”）.show（）
});
});
$（document）.ready（函数（）{$（“.user information”）.hide（）；$（“.btn”）。单击（函数（）{$（“.medicine information”）.hide（）$（“.user information”）.show（）}）仍然不起作用您需要修复html中“medicine Information”的拼写。分号是可选的。您能给我一把小提琴吗？如果您为我们设置了小提琴，我很乐意看一看。虽然分号在换行时是可选的，但我相信在这种情况下分号是最好的做法。你有没有包括jquery链接？是的，在正文的底部，哪里是
医学信息的html
你能分享它吗？请检查我的答案，它将来会起作用，以帮助那些回答你问题的人，请详细说明代码中的错误或不正确之处。。我认为很多人在按下“下一步”时并不理解表单正在提交，但你会看到。如果你这样做，在表单提交之前，它会再次显示第一个div。使用切换并不能解释为什么它在一开始就不起作用。按钮应该在表单中。
<button class="btn">Next</button>
<button type="submit" class="btn">Report</button>

<button type="button" class="btn">Next</button>
<button type="button" class="btn">Report</button>