jquery切換選項卡隱藏活動類當點擊相同的選項卡

Question

當我點擊選項卡1，1內容顯示和活動選項卡類添加。

當我點擊選項卡2,1內容隱藏刪除選項卡活動類和2的內容顯示，並增加了標籤活動類

但是當我點擊選項卡1,1內容表達出我想要的效果，再次單擊標籤1內容隱藏，但選項卡活動類不會刪除。

任何建議將幫助感謝

<div id="tabs_container"> 
    <ul class="tabs"> 
    <li> 
     <a href="#" rel="#tab_1_contents" class="tab">Option 1</a> 
    </li> 
    <li> 
     <a href="#" rel="#tab_2_contents" class="tab">Option 2</a> 
    </li> 
    </ul> 

    <div class="tab_contents_container">  
     <div id="tab_1_contents" class="tab_content tab_contents_active"> 
     Option 1 stuff  
     </div> 

     <div id="tab_2_contents" class="tab_content">' 
     Option 2 stuff</div> 
     </div> 

    </div> 
</div> 

<script> 
$('.tab-content').hide(); 

    $('.tab').click(function() { 
    var target = $(this.rel);   
     $('.tab-content').not(target).hide(); 
     target.toggle(); 

    $('#tabs_container > .nav-tabs > li.tabActive') 
     .removeClass('tabActive'); 

    $(this).parent().addClass('tabActive'); 

    $('#tabs_container > .tab_contents_container > div.tab_contents_active') 
     .removeClass('tab_contents_active'); 

    $(this.rel).addClass('tab_contents_active'); 
}); 
</script> 

Answer 1

使用target.show();而不是target.toggle();。 .toggle()將根據其當前visibility

也是正確typoshow()/hide()元素。在選擇項目時，您正在使用-而不是_。

$('.tab_content').hide(); //typo here! 
 
$('.tab').click(function() { 
 
    $('.tab_content').hide(); 
 
    var target = $(this.rel); 
 
    if ($(this).parent().hasClass('tabActive')) { 
 
    target.hide(); 
 
    $(this).parent().removeClass('tabActive'); 
 
    } else { 
 
    $('.tabs li').removeClass('tabActive'); 
 
    target.show(); 
 
    $(this).parent().addClass('tabActive'); 
 
    } 
 
});

.tabActive { 
 
    background: orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="tabs_container"> 
 
    <ul class="tabs"> 
 
    <li> 
 
     <a href="#" rel="#tab_1_contents" class="tab">Option 1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" rel="#tab_2_contents" class="tab">Option 2</a> 
 
    </li> 
 
    </ul> 
 

 
    <div class="tab_contents_container"> 
 
    <div id="tab_1_contents" class="tab_content"> 
 
     Option 1 stuff 
 
    </div> 
 

 
    <div id="tab_2_contents" class="tab_content">Option 2 stuff</div> 
 
    </div> 
 

 
</div>

Answer 2

你需要使用.toggleClass();

$('#tabs_container > .nav-tabs > li.tabActive').not($(this).parent()).removeClass('tabActive'); 
$(this).parent().toggleClass('tabActive'); 

$('.tab').click(function() { 
 
    var target = $(this.rel); 
 

 
    $('#tabs_container li').not($(this).parent()).removeClass('tabActive'); 
 

 
    $(this).parent().toggleClass('tabActive'); 
 

 
    $('#tabs_container > .tab_contents_container > div').not($(target)).removeClass('tab_contents_active'); 
 
    $(target).toggleClass('tab_contents_active'); 
 
}).eq(0).click();

.tabActive{ 
 
    background : #005eff; 
 
    padding : 5px; 
 
    
 
} 
 
.tabActive > a{ 
 
    color :#fff; 
 
} 
 

 
.tab_content{ 
 
    display : none; 
 
} 
 

 
.tab_contents_active{ 
 
    display : block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tabs_container"> 
 
    <ul class="tabs"> 
 
    <li> 
 
     <a href="#" rel="#tab_1_contents" class="tab">Option 1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" rel="#tab_2_contents" class="tab">Option 2</a> 
 
    </li> 
 
    </ul> 
 

 
    <div class="tab_contents_container">  
 
     <div id="tab_1_contents" class="tab_content"> 
 
     Option 1 stuff  
 
     </div> 
 

 
     <div id="tab_2_contents" class="tab_content"> 
 
     Option 2 stuff 
 
     </div> 
 

 
    </div> 
 
</div>

Answer 3

一個簡單版本的代碼：

$('.tab').click(function() { 
 
    $('.tab_content').removeClass('tab_contents_active'); 
 
    $(this.rel).addClass("tab_contents_active"); 
 
    });

.tab_content { display:none;} 
 
.tab_content.tab_contents_active { display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tabs_container"> 
 
    <ul class="tabs"> 
 
    <li> 
 
     <a href="#" rel="#tab_1_contents" class="tab">Option 1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" rel="#tab_2_contents" class="tab">Option 2</a> 
 
    </li> 
 
    </ul> 
 

 
    <div class="tab_contents_container"> 
 
    <div id="tab_1_contents" class="tab_content tab_contents_active"> 
 
     Option 1 stuff 
 
    </div> 
 

 
    <div id="tab_2_contents" class="tab_content"> 
 
     Option 2 stuff</div> 
 
    </div> 
 

 
</div> 
 
</div>