Question

我的理念是： 有div-1和div-2。将隐藏div-2，并显示div-1。显示的button中有一个div-1。点击button后，{隐私div-1将被隐藏，div-2将会显示。

这是我的代码：

<div id="report-medicine">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h3>REPORT A SUSPICIOUS MEDICINE</h3>
                <form>
                    <div class="form-group medicine-information">
                        <textarea type="text" class="" placeholder="Tell Us About The Fake Medicine..."></textarea>
                        <button class="btn">Next</button>
                    </div>

                    <div class="user-information">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Your Name">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Phone Number">
                        </div>
                        <button type="submit" class="btn">Report</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function(){
    $(".user-information").hide();
    $(".btn").click(function(){
        $(".medicine-information").hide()
        $(".user-information").show()
    });
});
</script>

但代码不起作用：/请通过更正代码来帮助我。

Answer 1

JQuery内置了一个切换方法。基本上，首先将想要隐藏的div设置为'display：none;'然后在按钮单击时在可见和隐藏之间切换。

$(document).ready(function() {
  $("#toggle").click(function() {
    $("#div1").toggle();
    $("#div2").toggle();
  });
});

.hidden {
  display: none;
}
#div1 {
  color: red;
  border: 1px solid black;
}
#div2 {
  color: blue;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="div1">
    <p>Hello</p>
  </div>
  <div id="div2" class="hidden">
    <p>World!</p>
  </div>
  <button id="toggle">Toggle</button>
</body>

Answer 2

问题是，如果您使用<button>而未设置显式类型，则表单会自动提交。

一个简单的解决方法：

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

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

Demo

Answer 3

将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>

所以试试这段代码： -

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="report-medicine">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h3>REPORT A SUSPICIOUS MEDICINE</h3>
                <form>
                    <div class="form-group medicine-information">
                        <textarea type="text" class="" placeholder="Tell Us About The Fake Medicine..."></textarea>
                        <button type="button" class="btn">Next</button>
                    </div>

                    <div class="user-information">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Your Name">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Phone Number">
                        </div>
                        <button type="button" class="btn">Report</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".user-information").hide();
            $(".btn").click(function () {
                $(".medicine-information").hide()
                $(".user-information").show()
            });
        });
    </script>
    
</body>
</html>

Answer 4

你有一些错别字。为了快速解决问题。

替换

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

使用

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

Answer 5

请使用： -

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

班级名称不同
使用“。”在选择器中选择一个类。

Answer 6

你在第一个div中使用表单操作..所以页面得到刷新。并且您使用textarea.try获得了相同的页面以使用Ajax Onclick

Answer 7

您当前的代码仅适用于第一次点击（一个div将隐藏，另一个显示）。但是之后的点击将继续将已隐藏的div设置为隐藏并显示将继续显示。幸运的是，jquery有一种方法可以显示隐藏和隐藏（如果显示）。肘节

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

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

7 个答案: