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

我在此处的 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>

Answer 2

您提供的 URL 加载脚本 vertical-one-page.js 以实现平滑滚动，它向构成选项卡的链接添加 'click' 事件处理程序。该事件处理程序更改 location 和 returns 'false'，这会阻止其他事件处理程序运行。您可能需要删除或修改该脚本，使其操作不会影响选项卡上的点击。

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

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

Bootstrap 4 tabs don't work in Wordpress Understrap theme

javascript

jquery

wordpress

bootstrap-4

twitter-bootstrap-4