隐藏div并同时显示div？

Question

我正在学习jQuery，并在一个简单的示例中工作，当我单击“ next”时，我想显示div，它隐藏了最后一个div。 它的确隐藏了上一个div，但不显示新的div。

我将如何做到这一点？

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
  $("#hidediv").hide();
 $("#showingdiv").show();
  });

});
</script>
</head>
<body>

<div id="hidediv">This is a paragraph.</div>

<button class="btn1">next</button>

<div id="showingdiv><p>showing div next</p></div>
</body>
</html>

我从http://www.w3schools.com/jquery/eff_show.asp获得了此信息，但是做了一些更改。

Answer 1

首先，您在showingdiv ID中有一个错字（它缺少showingdiv双引号）。 因此，JQuery找不到div ...

其次，没有什么可显示的，因为它并不是一开始就隐藏的。 所以我添加了一些CSS，这些CSS将首先隐藏第二个div ...

这是一个正在工作的JSFiddle

HTML：

<div id="hidediv">This is a paragraph.</div>
<button class="btn1">next</button>
<div id="showingdiv"><p>showing div next</p></div>

JS：

$(document).ready(function () {
    $(".btn1").click(function () {
        $("#hidediv").hide();
        $("#showingdiv").show();
    });

});

和CSS：

#showingdiv{
    display:none;
}

另外，您可以使用JQuery函数toggle 。

它将根据其状态将显示更改为隐藏或显示（简化...）。

因此，就像电灯开关一样，它将打开（显示）元素，或关闭（隐藏）元素

这是带有切换功能的可工作的JSFiddle

JS代码如下所示：

$(document).ready(function () {
    $(".btn1").click(function () {
        $("#hidediv").toggle();
        $("#showingdiv").toggle();
    });

});