Bootstrap选项卡式导航故障

Question

I am having some issues with a tabbed block on my website. I have a demo link at the foot of this.

Firstly when I click the tabs, they don't remain active after clicking. Also, I want to only show the tab content that has been clicked. Right now, it just lists all 5 divs. Help?

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');
        });

Demo: https://jsfiddle.net/czh8q2Le/

Answer 1

You could add a new class to your SCSS called .show-tab

.show-tab {
  display: block;
}

Also, you will want to add the following attribute to your .tab-content

.tab-content {
  display: none;
}

This allows all your divs to be initially invisible, and then make them visible once you add the .show-tab class to the div.

Then in your HTML replace your current tag for your divs with show-tab like so (this makes it so the first div is initially shown)

<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>

Finally, simply change your javascript so it changes the show-tab class, allowing you to add .show-tab to the divs you want to be shown and to remove .show-tab from the divs you don't wish to display:

$('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');
});

Hope this helps. Here is a working fiddle: https://jsfiddle.net/czh8q2Le/1/