Bootstrap Togglable标签只能工作一次？

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

Answer 3

In my case it was a clash of SmoothScroll with Bootstrap 4 tabs.

I changed this line

'a[href*="#"]'

to

'a[href*="#"]:not([data-toggle="tab"])'

and that fixed it. Hopefully that helps someone else.

Answer 4

Since bootstrap 4 as a whole is rewritten to avoid issues/clashes with other javascript libraries.

Even I had the same issue but solved by disabling smooth-scroll.min.js

In your case try to disable few JS files and try your luck until stable BS4 releases.

Answer 5

I had the same problem and I spent hours on this code, really couldn't figure out what the problem was. In the end it was caused by a <div> element positioned between the <li class="nav-item"> element and the <a class="nav-link"> .

Code with problem:

<ul class="nav servizi-tab" role="tablist">
   <li class="nav-item">
     <div class="wt-icon-box-wraper left p-a20">
        <a href="#consulenza" data-toggle="tab" role="tab" aria-controls="consulenza" aria-selected="true" id="consulenza-tab" class="nav-link">
           <div class="icon-content">
              <h4 class="wt-tilte text-uppercase">Title</h4>
              <p>Lorem ipsum dolor sit amet.</p>
            </div>
         </a>
      </div>
   </li>  
</ul>

Working code:

<ul class="nav servizi-tab" role="tablist">
   <li class="nav-item">
      <a href="#media" data-toggle="tab" role="tab" aria-controls="media" aria-selected="true" id="media-tab" class="nav-link">
         <div class="wt-icon-box-wraper left p-a20 m-b50">
             <div class="icon-content">
               <h4 class="wt-tilte text-uppercase">Title</h4>
               <p>Loem ipsum dolor sit amet.</p>
             </div>
         </div>
       </a>
   </li> 
</ul>

Hope this can help someone!