Question

我一直在使用rails来创建网站。所以我在主页的部分使用了Bootstrap Togglable标签。

问题是每个导航标签按钮看起来只有一次。例如，当我单击第二个选项卡导航时，第二个选项卡正确显示，所以在此之后我单击第三个选项卡导航，然后第三个部分看起来很好。

但是，当我再次单击第二个选项卡导航时，没有任何事情发生，它仍然在第三个选项卡内容上。当我从第三个标签移动到第四个标签时，情况相同。

这是我的一些代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<button id="test">test</button>
	
<div class="loading"><div id="loading-img"></div></div>
   <div id="line-chart"></div>

我的js

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

任何人都知道如何解决这个问题？

谢谢！

Answer 1

使用Bootstrap 4.0.0 BETA时会出现此错误。我无法修复它，并在jsfiddle中切换回3.3.6，现在它可以正常工作。

要明确这一点：我使用4.0.0 BETA将bs文档js标签和jsfiddle复制到我的网站上，你总是只能点击一次标签。这一定是个错误。

以下是所有BS版本（我之前选择了3.3.6）： https://bootstrapdocs.com/

Answer 2

根据我的猜测，您忘了添加数据切换＆＃39;属性到您的链接。尝试将data-toggle="tab"添加到您的链接。

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

那应该解决问题。让我知道。

更新

嗯，你做错了，你为每个标签创建了不同的<ul>。您应该将所有标签链接放在一个<ul>中。这是一个有效的Demo

Answer 3

在我的情况下，它是SmoothScroll与Bootstrap 4标签的冲突。

我改变了这一行

'a[href*="#"]'

到

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

并修复了它。希望这有助于其他人。

Answer 4

由于整个bootstrap 4被重写，以避免与其他JavaScript库发生问题/冲突。

即使我有同样的问题，但通过禁用解决了光滑scroll.min.js

在你的情况下，尝试禁用一些JS文件，并尝试运气，直到稳定的BS4发布。

Answer 5

我遇到了同样的问题，我花了几个小时在这段代码上，真的无法弄清楚问题出在哪里。最后，它是由位于<div>元素和<li class="nav-item">之间的<a class="nav-link">元素引起的。

有问题的代码：

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

工作代码：

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

希望这可以帮助某人！

Bootstrap Togglable标签只能工作一次？

5 个答案: