个人中心
gpt4 book ai didi

jquery - 同时隐藏div和显示div？

转载 作者：行者123 更新时间：2023-12-01 04:08:04 25 4
gpt4 key购买 nike

我正在学习 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>

我从以下 channel 获得此信息 http://www.w3schools.com/jquery/eff_show.asp但已经改变了一些东西。

最佳答案

首先，您的 showingdiv id 中有一个拼写错误(缺少右双引号)。因此，JQuery 找不到 div...

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

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();
    });

});

关于jquery - 同时隐藏div和显示div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24791683/

25 4 0
文章推荐： javascript - 为什么我的 D3 map 中的文本隐藏在状态后面？
文章推荐： jquery - 如何使用 JavaScript 在 JQuery Mobile 1.4.3 中触发 data-rel ="back"按钮？
文章推荐： .net - 如何使 Visual Studio 中的文本编辑器看起来像这样？
文章推荐： python - 如何使用查询集更新 django auth_user？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com