Question

在我的网站上，我有各种容器，其中包含内容<div>的文本。然后，我在容器中有链接，用于更改内容<div>。

但是，我无法获取定位特定内容的链接，而是两组链接都会更改容器<div>。

如果你看一下jfiddle，我希望first-div和second-div都自动包含内容，然后我希望这些链接只改变它们各自的内容。相反，我只有内容1-4出现在两者中。我也会把代码放在这里：

//HTML
<div class="container-div">
    <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" class="content">Content Here1</div>
    <div id="content2" class="content">Content Here2</div>
    <div id="content3" class="content">Content Here3</div>
    <div id="content4" class="content">Content Here4</div>
</div>


<div class="container-div">
    <div id="tab">
    <ul>
        <li id="tab5" class="active"><a href="#">Link 5</a></li>
        <li id="tab6"><a href="#">Link 6</a></li>
        <li id="tab7"><a href="#">Link 7</a></li>
        <li id="tab8"><a href="#">Link 8</a></li>
    </ul>
    </div>
    <div id="content5" class="content">Content Here1</div>
    <div id="content6" class="content">Content Here2</div>
    <div id="content7" class="content">Content Here3</div>
    <div id="content8" class="content">Content Here4</div>
</div>

脚本：

//Jquery Business

$(document).ready(function() {
    var activeId = $(".active").attr("id").replace("tab",""); $("#content" + activeId).show();
   $("#tab a").click(function() {
      $(".content").hide();
      $("#tab .active").removeClass("active");
      $(this).addClass("active")
      var id = $(this).closest("li").attr("id").replace("tab","");
      $("#content" + id).show();
   });

});

Answer 1

你在寻找吗？

http://jsfiddle.net/hKMFb/24/

Answer 2

有一些问题。首先，您有两个div标记id="tab"。您的另一个问题是，您同时在两个class="active"标记上li。我现在正在处理您的代码，看看我是否能找到解决方案。

更新：这是一个分叉小提琴的链接，它可以正常工作：http://jsfiddle.net/Skooljester/LNXPG/仅供参考，因为你的HTML，你有两个内容1-4出现......

<div id="content1" class="content">Content Here1 <div id="content2" class="content">Content Here2 <div id="content3" class="content">Content Here3 <div id="content4" class="content">Content Here4

该代码重复两次，一次针对第一组选项卡，另一次针对第二组。如果您将第二组1,2,3,4更改为5,6,7,8，则会正确显示。

多个容器DIV通过链接独立更改内容

2 个答案: