使用 jquery 更改具有嵌套内容的 div 的可见性，onclick

Posted 2023-02-21

【中文标题】使用 jquery 更改具有嵌套内容的 div 的可见性，onclick

【英文标题】：using jquery to change visibility of divs with nested content, onclick

【发布时间】：2011-01-18 10:50:24

【问题描述】：

我有一个链接列表。单击其中一个链接时，我想更改与之关联的 div 的可见性。我的 html 如下所示：

<div id="tab">
<ul>
<li id="tab1" class="active"><a href="#">Link 1</a></li>
<li id="tab2"><a href="#">Link 2</a></li>
<li id="tab3"><a href="#">Link 3</a></li>
<li id="tab4"><a href="#">Link 4</a></li>
</ul>
</div>

<div id="content1"><div class="nestedDiv">Content Here</div></div>
<div id="content2"><div class="nestedDiv">Content Here</div></div>
<div id="content3"><div class="nestedDiv">Content Here</div></div>
<div id="content4"><div class="nestedDiv">Content Here</div></div>

我尝试使用在此处找到的示例：How do you swap DIVs on mouseover? (jquery?)，但由于嵌套的 div 失败。

有什么想法可以让我在点击时显示给定 div 中的所有内容，包括其他 div 中的所有内容？我还想在页面首次打开时保持第一个 div 处于活动状态...更改所选 li 的活动外观...但我还没有尝试解决这个问题。

感谢任何输入。谢谢！

谢谢！

【问题讨论】：

您应该显示您用来尝试隐藏/显示内容的代码，因为不清楚您使用的是什么调用或选择器。

【参考方案1】：

在每个内容 div 上添加 class="content"

<style type="text/css">
.content

    display: none;

</style>

<script type="text/javascript">

$(document).ready(function() 

   $("#tab a").click(function() 

      //reset
      $(".content").hide();
      $("#tab .active").removeClass("active");

      //act
      $(this).addClass("active")
      var id = $(this).closest("li").attr("id").replace("tab","");
      $("#content" + id).show();
   );

);
</script>

【讨论】：

这很好用，非常感谢！关于如何在页面首次加载时保持第一个内容 div 打开的任何提示？

哎呀，忘了那个。在 $(document).ready 部分下添加： var activeId = $(".active").attr("id").replace("tab",""); $("#content" + activeId).show();

是的 - 这就像一个魅力。非常感谢您的帮助。