user3403614 user3403614 - 5 months ago 23
jQuery Question

Bootstrap Togglable tabs only working one time?

I have been using rails for create the site.
So I use Bootstrap Togglable tabs in the part of my homepage.

The problem is every navigation tabs buttons seem working only one time.
For example, when i click the second tab navigation then the second tab appear correctly, so after that i click the third tab navigation, then the third section seem fine.

But when i click the second tab navigation again nothing happened it still be on the third tab content. Same situation when i move from third tab to the forth one.

This is some of my code.

<div id="tabs-menu-box" class="insurance-tab-menu-box">
<div class="row">
<div class="services">
<!-- one service -->
<div class="one-service color1">
<ul>
<li>
<a href="#carInsurance"
aria-controls="carInsurance"
role="tab">
<h3>ประกันภัยรถยนต์</h3>
</a>
</li>
</ul>
</div>
<!-- one service end -->
<!-- one service -->
<div class="one-service color2">
<ul>
<li>
<a href="#prbInsurance"
aria-controls="prbInsurance"
role="tab">
<h3>พรบ.</h3>
</a>
</li>
</ul>
</div>
<!-- one service end -->
<!-- one service -->
<div class="one-service color3">
<ul>
<li>
<a href="#fireInsurance"
aria-controls="fireInsurance"
role="tab">
<h3>ประกันอัคคีภัย</h3>
</a>
</li>
</ul>
</div>
<!-- one service end -->
<!-- one service -->
<div class="one-service color4">
<ul>
<li>
<a href="#acidentInsurance"
aria-controls="acidentInsurance"
role="tab">
<h3>ประกันอุบัติเหตุ (PA)</h3>
</a>
</li>
</ul>
</div>
<!-- one service end -->
<!-- one service -->
<div class="one-service color6">
<ul>
<li>
<a href="#generalInsurance"
aria-controls="generalInsurance"
role="tab">
<!--<img src="images/icon-health.png" alt="">-->
<h3>ประกันภัยอื่นๆ</h3>
</a>
</li>
</ul>
</div>
<!-- one service end -->
</div>
</div>
</div>

<div class="insurance-tab-content-box">
<div class="container small-container">
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="carInsurance">
content
</div>
<div role="tabpanel" class="tab-pane" id="prbInsurance">
content
</div>
<div role="tabpanel" class="tab-pane" id="fireInsurance">
content
</div>
<div role="tabpanel" class="tab-pane" id="acidentInsurance">
content
</div>
<div role="tabpanel" class="tab-pane" id="generalInsurance">
content
</div>
</div>
</div>
</div>


My js

$('#tabs-menu-box a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});


Anyone know how to fix this?

Thanks!

Answer

From what I guess is, you forgot to add the 'data-toggle' attribute to your link. Try adding data-toggle="tab" to you link.

<a href="#carInsurance" data-toggle="tab" aria-controls="carInsurance" role="tab">
  <h3>ประกันภัยรถยนต์</h3>
</a>

That should fix the problem. Let me know.

Update:

Well, what you have done wrong is, you've created different <ul> for every tab. You're supposed to put all your tabs links in a single <ul>. Here is a working Demo