Jquery - 한 페이지에서 여러 탭으로 작업 하시겠습니까?

Question

내가 간단한 jQuery를 탭 설정을위한이 코드를 사용하고 있습니다 : 여기

$('.tabs .tab_content').hide(); // Hide all divs 
$('.tabs .tab_content:first').show(); // Show the first div 
$('.tabs ul.tab_nav li:first').addClass('current_tab'); // Set the class of the first link to active 

$('.tabs ul.tab_nav li a').click(function(){ //When any link is clicked 
    $('.tabs ul.tab_nav li a').removeClass('current_tab'); // Remove active class from all links 
    $(this).addClass('current_tab'); //Set clicked link class to active 

    var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link 

    $('.tabs .tab_content').hide(); // Hide all divs 
    $(currentTab).show(); // Show div with id equal to variable currentTab 
    return false; 
}); 

그리고 것은 샘플 HTML입니다 :

<div class="box tabs"> 
        <div class="box_header"> 
    <h2>3/4 Width</h2> 
    <ul class="tab_nav"> 
     <li><a href="#tab1" class="current_tab">Tab #1</a></li> 
     <li><a href="#tab2">Tab #2</a></li> 
     <li><a href="#tab3">Tab #3</a></li> 
     <li><a href="#tab4">Tab #4</a></li> 
    </ul> 
</div> 
<div class="box_content tab_content" id="tab1">1</div> 
<div class="box_content tab_content" id="tab2">2</div> 
<div class="box_content tab_content" id="tab3">3</div> 
<div class="box_content tab_content" id="tab4">4</div> 
</div> 

그것은 탭 중 하나 개 세트 아름답게 작동하지만 다른 설정을 추가하는 경우 (위 코드와 같은 또 다른 코드 블록) 모두 엉망이되어 탭을 두 개의 개별 탭 인스턴스가 아닌 하나의 큰 객체로 취급합니다. 어떻게 작동하도록 변환 할 수 있습니까? 이상적으로 HTML에 많은/아무것도 추가하지 않고?

감사합니다. 당신이 tab_nav하고 탭을 사용하면 두 세트를 조작 tab_nav를 조작 변경 언제든지 주위에 당신의 솔루션을 구축하기 때문에 당신이있을 때

알렉스

Answer 1

는

$('.tabs').each(function(){ 
var tab = $(this); 
tab.find('.tab_content').hide(); // Hide all divs 
tab.find('.tab_content:first').show(); // Show the first div 
tab.find('ul.tab_nav li:first').addClass('current_tab'); // Set the class of the first link to active 

tab.find('ul.tab_nav li a').click(function(){ //When any link is clicked 
    tab.find('ul.tab_nav li a').removeClass('current_tab'); // Remove active class from all links 
    tab.addClass('current_tab'); //Set clicked link class to active 

    var currentTab = tab.find($(this).attr('href')); // Set variable currentTab to value of href attribute of clicked link 

    tab.find('.tab_content').hide(); // Hide all divs 
    $(currentTab).show(); // Show div with id equal to variable currentTab 
    return false; 
}); 
}) 

Answer 2

코드는 작동하지 않습니다. ID를 고유하게 만들고 가장 가까운 ul.tab_nav를 찾고 코드를 제한하도록 코드를 업데이트해야합니다. jQuery 탭을 사용하는 방법을 살펴 보는 것이 좋습니다.

아래의 솔루션이 작동합니다 (Working Example) :

<div class="box tabs"> 
    <div class="box_header"> 
    <h2>3/4 Width</h2> 
    <ul class="tab_nav"> 
     <li><a href="#tab1" class="current_tab">Tab #1</a></li> 
     <li><a href="#tab2">Tab #2</a></li> 
     <li><a href="#tab3">Tab #3</a></li> 
     <li><a href="#tab4">Tab #4</a></li> 
    </ul> 
</div> 
<div class="box_content tab_content" id="tab1">1</div>  
<div class="box_content tab_content" id="tab2">2</div> 
<div class="box_content tab_content" id="tab3">3</div> 
<div class="box_content tab_content" id="tab4">4</div> 
</div> 



<div class="box tabs"> 
    <div class="box_header"> 
     <h2>Take 2</h2> 
     <ul class="tab_nav"> 
      <li><a href="#tab11" class="current_tab">Tab #1</a></li> 
      <li><a href="#tab21">Tab #2</a></li> 
      <li><a href="#tab31">Tab #3</a></li> 
      <li><a href="#tab41">Tab #4</a></li> 
     </ul> 
    </div> 
    <div class="box_content tab_content" id="tab11">11</div> 
    <div class="box_content tab_content" id="tab21">21</div> 
    <div class="box_content tab_content" id="tab31">31</div> 
    <div class="box_content tab_content" id="tab41">41</div> 
</div> 




$('.tabs .tab_content').hide(); // Hide all divs 

$('.current_tab').each(function(){ 
     $($(this).attr('href')).show(); //show the div that is selected      
    } 
); 

$('.tabs ul.tab_nav li a').click(function(){ //When any link is clicked 
    var current_tab = $(this).closest('.tab_nav').find('.current_tab'); 
    $($(current_tab).attr('href')).hide(); //hide the div that was selected 
    current_tab.removeClass('current_tab'); //remove the selected class 
    $(this).addClass('current_tab'); //Set clicked link class to active 
    $($(this).attr('href')).show(); //show the selected class 
    return false; 
}); 

물론 위의 더 정리 될 수있다, 당신은 당신이 DRY를 위반 해달라고 그래서 사업부를 숨 깁니다 수행하는 함수를 만들 수 있습니다.