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

您提供的网址会加载一个脚本vertical-one-page.js，以便顺畅滚动，这样就可以添加“点按”功能。构成选项卡的链接的事件处理程序。该事件处理程序更改location并返回＆＃39; false＆＃39;，这会阻止其他事件处理程序运行。您可能需要删除该脚本，或对其进行修改，以使其操作不会影响选项卡上的点击。

holger1411提到的href更改也是必要的。使用href="/#hash"是指位置#hash上的/，而不是当前页面上的/services/（href="#hash"）。仅使用#hash引用当前页面上的icon: lH。

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

2 个答案: