Question

我正在学习jquery并研究一个简单的例子当我点击隐藏的“下一个”时，我想显示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中有一个拼写错误（它错过了结束双引号＆＃39; s）。因此，JQuery无法找到div ...

其次，没有什么可以展示的，因为它并没有隐藏在第一位。所以我添加了一些将首先隐藏第二个div的CSS ......

Here's an working 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。

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

所以就像一个灯开关，它会打开元素（显示它），或者关掉一个元素（隐藏它）

Here's an working JSFiddle with the toggle function

JS代码如下所示：

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

});

隐藏div并同时显示div？

1 个答案: