Javascript 引导4个标签不'；不能在Wordpress主题下工作

我目前正在使用Bootstrap4中的Understrap主题。我已经尽了一切努力使标签工作

我有：
-从web复制并粘贴了许多工作解决方案
-手动添加jQuery和引导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>

/imgs/icons/Innovation Azul.png“>
Exatronic主要与当地和欧洲合作伙伴紧密合作，参与复杂的长期I+I项目，持续时间长达3年，以解决结合多学科硬技能的创新机会。在以前和现在的项目中，Exatronic与具有电信专业知识的公司和调查实体合作信息技术、机械、工业产品设计、云计算、塑料成型、健康、精确农业等。通常，此类I+I项目由国家或欧洲项目资助

/imgs/icons/Engineering_Azul.png“>
以一个简单的想法或概念为出发点，我们进行技术可行性分析，我们构建整个研发过程，我们制造解决方案，我们通过交付新产品可行性分析来完成，我们构建整个研发过程，我们制造解决方案，我们通过交付新产品来完成

/imgs/icons/Supply Azul.png“>
以一个简单的想法或概念为出发点，我们进行技术可行性分析，我们构建整个研发过程，我们制造解决方案，我们通过交付新产品可行性分析来完成，我们构建整个研发过程，我们制造解决方案，我们通过交付新产品来完成

下面是一个活生生的例子： -

---

谢谢

我在UnderStrap演示网站上测试了默认的Bootstrap 4标记：

而且标记工作正常。可能是代码中的

href=“/#innovation”

。删除/slash后再定位正确的内容项

这就是我在演示网站上使用的内容：

一
二
三
四

您提供的URL加载一个脚本

垂直一页.js

，用于平滑滚动，该脚本向组成选项卡的链接添加一个“单击”事件处理程序。该事件处理程序更改

位置

，并返回“false”，这会阻止其他事件处理程序运行。您可能需要删除该脚本，或者修改它，使其操作不会影响选项卡上的单击

---

holger1411提到的

href

更改也是必要的。使用

href=“/#hash”

指的是

#hash

位于

/

位置，而不是当前页面（

/services/

）上。仅使用

href=“#hash>）“

指的是当前页面上的

#散列。
多亏了这两个！我遇到了几个问题：-脚本
垂直一页.js
-这个
href=/#
-我缺少一个
区域expanded=“true”
-还有一个额外的
div class=“nav item content”
包装选项卡链接，它现在正在工作！你的回答很有帮助！
<!-- 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>