使用jQuery来改变嵌套内容的div的可见性，onclick [英] using jquery to change visibility of divs with nested content, onclick

问题描述

我有一个链接列表。点击其中一个链接时，我想更改与其关联的div的可见性。我的html看起来像下面这样：

I have a list of links. When one of the links is clicked, I would like to change the visibility of the div associated with it. My html looks like the following:

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

我尝试使用在此处找到的示例：你如何交换鼠标悬停DIVs？ （jquery？），但它因嵌套的div而失败。

I tried using examples I found here: How do you swap DIVs on mouseover? (jquery?) but it fails because of the nested divs.

任何有关如何以一种方式工作的想法，给定的div，包括其他divs，点击显示？我还想在第一次打开页面时保持第一个div处于活动状态...更改所选li的活动外观...但我还没有试图解决这个问题。

Any ideas of how I can get this working in a way that all the content within a given div, including other divs, is shown on click? I'd also like to keep the first div in an active state when the page is first opened... change the active look of the li that is selected... but I haven't attempted to tackle that yet.

赞赏任何输入。谢谢！

谢谢！

推荐答案

Add a class =content on each content div

Add a class="content" on each content div

<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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！