동일한 페이지에 여러 개의 jquery 탭이 있음

Question

jquery 탭에 대한 도움이 필요합니다. 내가 물어볼 질문에 대한 답을 찾았지만 문제는 대부분의 jquery 탭이 "a"태그를 탐색에 사용하고 "a"태그없이 작업 할 시간을 보냈다는 것입니다. 나는 아주 좋은 이유로 그것을 그렇게하고 싶다.

여기 내 질문이 있습니다. 잘 작동하는 jquery 탭이 있습니다. 그러나 동일한 페이지에 둘 이상의 탭을 넣으려고하면 서로 모순됩니다.

여기에 jsfiddle 링크가 있습니다. jquery 코드를 복제하고 ID와 클래스를 두 번째 탭과 일치하도록 변경하려고 시도했지만 작동하지 못하는 것 같습니다.

내 홈페이지에 5 개의 콘텐츠 섹션이 있고 섹션 2와 5에 탭이 있어야한다고 가정 해보십시오. 여기

#tabs-nav-wrap {padding:10px 0; text-align: center;} 
#tabs-nav-wrap ul {display: inline-block; list-style: none;} 

#tabs-nav-wrap ul li { 
    list-style: none; 
    display: inline-block; 

    margin:0 3px; 
} 
#tabs-nav li { 
    list-style: none; 
    display: block; 
    padding:10px 20px; 
    background: #736565; 
    font-size: 16px; 
    font-weight: 300; 
    cursor: pointer; 
    color: #fff; 
    text-align: left; 
    text-decoration: none; 
    border:1px solid #615656; 
} 

#tabs-nav .tab-nav-link.current, 
#tabs-nav .tab-nav-link:hover { 
    border:1px solid #5eaace; 
    background: #74c1e4; 
} 

.tab-content {padding:20px 0; text-align: center;} 

를 HTML의 :

다음은 CSS의 정말 도움이 필요

$(function() { 
    $('.tab-content:not(:first)').hide(); 
    $('#tabs-nav .tab-nav-link').bind('click', function(e) { 
    $this = $(this); 
    $target = $($this.data("target")); // get the target from data attribute 
    $('#tabs-nav .tab-nav-link.current').removeClass('current'); 
    $('.tab-content:visible').fadeOut("fast", function() { 
     $this.addClass('current'); 
     $target.fadeIn("fast"); 
    }); 
    }).filter(':first').click(); 
}); 

:

<div id="tabs-nav-wrap"> 
     <ul id="tabs-nav"> 
      <li class="tab-nav-link" data-target="#tab-one">TAB 1</li> 
      <li class="tab-nav-link" data-target="#tab-two">TAB 2</li> 
      <li class="tab-nav-link" data-target="#tab-three">TAB 3</li>   
     </ul> 
     <div style="clear:both;"></div> 
    </div><!-- ends tabs-nav-wrap -->  


<div class="tabs-main-content"> 

     <div id="tab-one" class="tab-content"><!-- Begins tab-one --> 
     <div class="tab-inner"> 
      <p>Tab 1 content here.</p> 
     </div> 
     </div> 

     <div id="tab-two" class="tab-content"><!-- Begins tab-two --> 
     <div class="tab-inner"> 
      <p>Tab 2 content here.</p> 
     </div> 
     </div> 

     <div id="tab-three" class="tab-content"><!-- Begins tab-three --> 
     <div class="tab-inner"> 
      <p>Tab 3 content here.</p> 
     </div> 
     </div>  

    <div style="clear:both;"></div> 
    </div><!-- # tabs-main-content -->  

가 여기 내 jQuery 코드의 모습입니다. 미리 감사드립니다!

Answer 1

id 대신 class을 사용하면 고유 한 선택기이며 동일한 코드로 여러 탭을 처리하려고합니다. 활성 요소가 아닌 클래스를 숨기거나 제거하려면 siblings()을 사용하십시오. 여기에 업데이트 됨 fiddle