여러 컨테이너 DIV 변경 링크를 통해 독립적으로 내용을 변경

Question

내 웹 사이트에는 내용이 <div> 인 다양한 컨테이너가 있습니다. 그런 다음 컨테이너에 내용이 변경되는 링크가 있습니다. <div> s.

그러나 특정 콘텐츠를 타겟팅하는 링크를 얻을 수 없으며 두 링크 세트 모두 컨테이너 <div>을 변경합니다.

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

당신이 jfiddle 보면, 내가 처음-DIV와 두 번째 DIV 모두 자동으로 콘텐츠를 갖고 싶어하고 나는 단지 각각의 내용을 변경하는 링크를하고 싶습니다. 대신 나는 content1-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" 태그가 있습니다. 다른 문제는 동시에 두 개의 li 태그에 class="active" 태그가 있다는 것입니다. 솔루션을 찾을 수 있는지 지금 코드로 작업하고 있습니다. 업데이트

: 여기는 잘 작동 갈래의 바이올린에 대한 링크입니다 : ... 콘텐츠 1-4 때문에 당신의 HTML의 모두에서 나타나고있다, 참고로

<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

http://jsfiddle.net/Skooljester/LNXPG/ 그 코드는 첫 번째 탭 집합에 대해 한 번, 두 번째 탭 집합에 대해 두 번 반복됩니다. 두 번째 세트의 1,2,3,4를 5,6,7,8로 변경하면 올바르게 표시됩니다.