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

我尝试使用在这里找到的示例：如何在鼠标悬停时交换 DIV？ （jquery？） https://stackoverflow.com/questions/34536/how-do-you-swap-divs-on-mouseover-jquery/34710#34710但由于嵌套的 div，它失败了。

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

任何意见都会受到赞赏。谢谢！

Thanks!

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