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

您提供的 URL 会加载脚本 vertical-one-page.js 以实现平滑滚动，该脚本将“单击”事件处理程序添加到构成选项卡的链接中。该事件处理程序更改 location 并返回“false”，这会阻止其他事件处理程序运行。您可能需要删除该脚本，或对其进行修改，以便其操作不会影响对选项卡的点击。

holger1411 提到的href 更改也是必要的。使用href="/#hash" 是指#hash 在位置/ 而不是在当前页面(/services/)。仅使用href="#hash" 指的是当前页面上的#hash。

Answer 2

我在 UnderStrap 演示站点上测试了默认的 Bootstrap 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>