Bootstrap 4选项卡在Wordpress Understrap主题中不起作用

Question

我目前在Bootstrap 4中使用了Understrap主题。我尝试了一切使标签工作。

我：
- 手动添加了jQuery和Bootstrap CSS
- - 从网络
复制和粘贴很多工作方案试图在不同的页面
- 试图用/#只有#

似乎没有任何工作。

这里是我的代码：

<!-- Nav tabs --> 
       <ul class="nav nav-tabs text-xs-center" role="tablist"> 
        <li class="nav-item"> 
         <div class="nav-item-content"> 
          <a class="nav-link active" data-toggle="tab" href="/#innovation" role="tab"> 
           <div class="icon-wrapper innovation"></div> 
           <h4>Innovation &<br/>Investigation</h4> 
          </a> 
         </div> 
        </li> 
        <li class="nav-item"> 
         <div class="nav-item-content"> 
          <a class="nav-link" data-toggle="tab" href="/#electronic-engineering" role="tab"> 
           <div class="icon-wrapper electronic-engineering"></div> 
           <h4>Electronic<br/>Engineering</h4> 
          </a> 
         </div> 
        </li> 
        <li class="nav-item"> 
         <div class="nav-item-content"> 
          <a class="nav-link manufacturing" data-toggle="tab" href="/#manufacturing" role="tab"> 
           <div class="icon-wrapper manufacturing"></div> 
           <h4>Manufacturing</h4> 
          </a> 
         </div> 
        </li> 
       </ul> 

       <!-- Tab panes --> 
       <div class="tab-content clearfix"> 

        <!-- Innovation --> 
        <div class="tab-pane" id="innovation" role="tabpanel"> 
         <div class="col-sm-5 text-xs-center"> 
          <img src="<?php echo get_template_directory_uri(); ?>/imgs/icons/Innovation-Azul.png"> 
         </div> 
         <div class="col-sm-5"> 
          <p>Mostly done in tight cooperation with local and European partners, Exatronic engages in complex long term I+I projects, lasting up to 3 years, to address innovation opportunities that combines multidisciplinary hard skills. In former and current projects, Exatronic partnered with companies and Investigation entities with expertise in telecommunications, mechanics, industrial product design, cloud computing, plastic moulding, health, precision agriculture and more. Usually, such I+I projects are funded by national or European programs.</p> 

          <a href="<?php echo site_url(); ?>/how-to-start-up/" class="btn btn-primary">How Can I Start</a> 
         </div> 
        </div> 

        <!-- Electronic Engineering --> 
        <div class="tab-pane" id="electronic-engineering" role="tabpanel"> 
         <div class="col-sm-5 text-xs-center"> 
          <img src="<?php echo get_template_directory_uri(); ?>/imgs/icons/Engineering_Azul.png"> 
         </div> 
         <div class="col-sm-5"> 
          <p>Having as starting point a simple idea or concept, we carry out the technical viability analysis, we build the whole R&D process, we manufacture the solution and we finish by delivering the new product viability analysis, we build the whole R&D process, we manufacture the solution and we finish by delivering the new product.</p> 

          <a href="<?php echo site_url(); ?>/how-to-start-up/" class="btn btn-primary">How Can I Start</a> 
         </div> 
        </div> 

        <!-- Manufacturing --> 
        <div class="tab-pane active" id="manufacturing" role="tabpanel"> 
         <div class="col-sm-5 text-xs-center"> 
          <img src="<?php echo get_template_directory_uri(); ?>/imgs/icons/Supply-Azul.png"> 
         </div> 
         <div class="col-sm-5"> 
          <p>Having as starting point a simple idea or concept, we carry out the technical viability analysis, we build the whole R&D process, we manufacture the solution and we finish by delivering the new product viability analysis, we build the whole R&D process, we manufacture the solution and we finish by delivering the new product.</p> 

          <a href="<?php echo site_url(); ?>/how-to-start-up/" class="btn btn-primary">How Can I Start</a> 
         </div> 
        </div> 
       </div> 

这里是一个活生生的例子： - http://www.exatronic.pt/services/

感谢

Answer 1

您的平滑滚动，这是增加了“点击”事件处理程序组成的链接提供负载脚本vertical-one-page.js的网址标签。该事件处理程序更改location并且还返回'false'，这会阻止其他事件处理程序运行。您可能需要删除该脚本，或对其进行修改，以使其操作不会影响选项卡上的点击。

href改变holger1411提到的也是必要的。使用href="/#hash"参考位置/处的#hash而不是当前页面（/services/）。仅使用href="#hash"指当前页面上的#hash。

Answer 2

我测试的UnderStrap演示站点这里默认的引导4标记： https://understrap.com/understrap/?page_id=1817

并且标记正常工作。在你的代码中可能是这个href="/#innovation"。去除目标正确的内容项目之前的/斜杠。

那是什么我在演示现场使用： https://v4-alpha.getbootstrap.com/components/navs/#using-data-attributes

<!-- Nav tabs --> 
<ul class="nav nav-tabs" role="tablist"> 
    <li class="nav-item"> 
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a> 
    </li> 
</ul> 

<!-- Tab panes --> 
<div class="tab-content"> 
    <div class="tab-pane active" id="home" role="tabpanel">one</div> 
    <div class="tab-pane" id="profile" role="tabpanel">two</div> 
    <div class="tab-pane" id="messages" role="tabpanel">three</div> 
    <div class="tab-pane" id="settings" role="tabpanel">four</div> 
</div>