Question

On my website I have various containers with content <div>s text in them. I then have links in the container which change the content <div>s.

However, I cannot get the links to target a specific content , instead the both sets of links change both container <div>s.

http://jsfiddle.net/hKMFb/1/

If you look at the jfiddle, I want both the first-div and the second-div to have content in them automatically, and then I would like the links to only change their respective content. Instead I only have content1-4 showing up in both. I’ll put the code here as well:

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

And the script:

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

Is that you are looking for?

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