Question

我有一个链接列表。单击其中一个链接时，我想更改与其关联的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保持在活动状态...更改所选择的li的活动外观......但我还没有尝试解决这个问题。

任何输入都表示赞赏。谢谢！

谢谢！

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

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

1 个答案: