Bootstrap Togglable tabs only working one time?

Question

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 1

This bug occurs when using Bootstrap 4.0.0 BETA. I could not fix it and switched back to 3.3.6 as in the jsfiddle and now it works.

To clear that up: I copied both the bs documentations js tabs and the jsfiddle onto my site with 4.0.0 BETA and you could always only click a tab once. This must be a bug.

Here are all BS versions (I chose 3.3.6 as mentioned before): https://bootstrapdocs.com/

Answer 2

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