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

我有一个链接列表.单击其中一个链接时,我想更改与其关联的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的活动外观……但我还没有尝试解决这个问题.

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

谢谢！

在每个内容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>