Bootstrap選項卡式導航小故障

我在我的網站上出現了一些選項卡式塊。我在腳下有一個演示鏈接。Bootstrap選項卡式導航小故障

首先，當我點擊標籤後，它們在點擊後不會保持活動狀態。此外，我只想顯示已點擊的標籤內容。現在，它只是列出了所有5個div。幫幫我？

HTML：

JS：

$('ul.tabs li').click(function() { 
     var tab_id = $(this).attr('data-tab'); 

     $('ul.tabs li').removeClass('current'); 
     $('.tab-content').removeClass('current'); 

     $(this).addClass('current'); 
      $("#"+tab_id).addClass('current'); 
     });

演示：https://jsfiddle.net/czh8q2Le/

來源

2017-10-07 michaelmcgurk

這是你想要什麼？ https://jsfiddle.net/czh8q2Le/1/ –

嘿尼克 - 我認爲這是我發佈的原始鏈接:) – michaelmcgurk

編輯完美 - 謝謝!!!! :)它只是改變了JS？ – michaelmcgurk

你可以一個新類添加到您的SCSS稱爲.show-tab

.show-tab { 
    display: block; 
}

而且，你會希望下面的屬性添加到您的.tab-content

.tab-content { 
    display: none; 
}

這讓所有的div是最初不可見的，然後讓他們看到，一旦你的.show-tab類添加到div。

然後在你的HTML替換當前標記爲您的div show-tab像這樣（這使得它如此的第一個div最初顯示）

<div class="tab-content show-tab" id="tab-pencil-pleat"> 
    1 
</div> 
<div class="tab-content" id="tab-delivery"> 
    2 
</div> 
<div class="tab-content" id="tab-eyelet"> 
    3 
</div> 
<div class="tab-content" id="tab-tabtop"> 
    4 
</div> 
<div class="tab-content" id="tab-wave"> 
    5 
</div>

最後，簡單地改變你的JavaScript，以便它改變了show-tab類，讓您.show-tab添加到您想要顯示的div並刪除你不希望顯示的div .show-tab：

$('ul.tabs li').click(function() { 
    var tab_id = $(this).attr('data-tab'); 

    $('ul.tabs li').removeClass('current'); 
    $('.tab-content').removeClass('show-tab'); 

    $(this).addClass('current'); 
    $("#"+tab_id).addClass('show-tab'); 
});

希望這有助於。這裏是一個工作小提琴：https://jsfiddle.net/czh8q2Le/1/

來源

2017-10-07 12:32:49

Bootstrap選項卡式導航小故障

回答

相關問題