Bootstrap 4タブはWordpress Understrapテーマでは機能しません

Question

私は現在、Bootstrap 4でアンダーストラップテーマを使用しています。私はタブを動作させるためにすべてを試しました。

は私が持っている：
- 手動で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> 

そして、ここでは実際の例です： - http://www.exatronic.pt/services/

おかげ

Answer 1

構成するリンクを「クリック」イベントハンドラを追加しますが、スムーズスクロールのために負荷にスクリプトvertical-one-page.jsを提供されたURL、タブ。そのイベントハンドラはlocationを変更し、他のイベントハンドラの実行を禁止する「false」も返します。そのスクリプトを削除するか、アクションがタブのクリックに影響を与えないようにスクリプトを修正する必要があります。

href上記のholger1411も変更が必要です。 href="/#hash"を使用すると、現在のページ（/services/）ではなく、/の位置にある#hashが参照されます。 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>