ブートストラップ4タブ - ページロードに最初のペインが表示されない

Question

タブブルペインに問題があります。ページを読み込むと、最初のペインがpageloadによって空のままになります。私は2番目のペインに切り替わり、最初のページに戻ります。内容が表示されます。私は解決策を見つけることができない、javacriptのエラーはありませんが、私はjavasriptの問題でなければならないと思う。私はブートストラップ4アルファ6とjquery3.1.1を使用しています。

<div class="tabbable-panes"> 
 
\t \t <ul id="clothing-nav" class="nav nav-tabs" role="tablist"> 
 
\t  <li class="nav-item"> 
 
      <a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Button Groups</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="#hats" role="tab" id="hats-tab" data-toggle="tab" aria-controls="hats">Button Toolbar</a> 
 
      </li> 
 

 
      <!-- Dropdown --> 
 
      <li class="nav-item dropdown"> 
 
       <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
 
       Button Dropdown 
 
       </a> 
 
       <div class="dropdown-menu"> 
 
       <a class="dropdown-item" href="#dropdown-combine" role="tab" id="dropdown-combine-tab" data-toggle="tab" aria-controls="dropdownCombine">Combining</a> 
 
       <a class="dropdown-item" href="#dropdown-split" role="tab" id="dropdown-split-tab" data-toggle="tab" aria-controls="dropdownSplit">Split</a> 
 
       </div> 
 
      </li> 
 
      </ul> 
 
      </div> 
 
      <!-- Content Panel --> 
 
      <div id="clothing-nav-content" class="tab-content"> 
 
      <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab"> 
 
       <p> 
 
\t \t \t <h5><i class="fa fa-hashtag" aria-hidden="true" ></i> Button Groups Horizontal</h5> 
 
\t \t \t  <div class="btn-group" role="group"> 
 
         <button type="button" class="btn btn-primary btn-sm">HTML5</button> 
 
         <button type="button" class="btn btn-primary btn-sm">CSS3</button> 
 
         <button type="button" class="btn btn-primary btn-sm">SCSS</button> 
 
       </div> 
 
\t \t \t </p> 
 
\t \t \t <p> 
 
\t \t \t <h5><i class="fa fa-hashtag" aria-hidden="true" ></i> Button Groups Vertical</h5> 
 
\t \t \t  <div class="btn-group-vertical" role="group"> 
 
         <button type="button" class="btn btn-primary btn-sm">HTML5</button> 
 
         <button type="button" class="btn btn-primary btn-sm">CSS3</button> 
 
         <button type="button" class="btn btn-primary btn-sm">SCSS</button> 
 
       </div> 
 
\t \t \t </p> 
 
\t \t \t <p>just add <code>vertical</code>to the btn-group class <code>class="btn-group-vertical"</code></p> 
 
      </div> 
 
      <div role="tabpanel" class="tab-pane fade" id="hats" aria-labelledby="hats-tab"> 
 
       <p> 
 
\t \t \t  <h5><i class="fa fa-hashtag" aria-hidden="true"></i> Button Toolbar</h5> 
 
\t \t \t \t <p>you can combine btn-groups by nest theme into one single - toolbar</p> 
 
        
 
\t \t \t \t <table class="table table-sm table-responsive"> 
 
        <thead> 
 
         <tr> 
 
         <th>Button Toolbar</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr> 
 
         <td> 
 
\t \t \t \t \t  <div class="btn-toolbar" role="toolbar"> 
 
         <div class="btn-group" role="group"> 
 
          <button type="button" class="btn btn-primary btn-sm">One</button> 
 
          <button type="button" class="btn btn-primary btn-sm">One</button> 
 
          <button type="button" class="btn btn-primary btn-sm">One</button> 
 
         </div> 
 
         <div class="btn-group" role="group"> 
 
          <button type="button" class="btn btn-primary btn-sm">Two</button> 
 
          <button type="button" class="btn btn-primary btn-sm">Two</button> 
 
         </div> 
 
         </div> 
 
\t \t \t \t \t </td> 
 
         </tr> 
 
        </tbody> 
 
        </table> 
 
\t \t \t \t  
 
\t \t \t \t </p> 
 
      </div> 
 
      <div role="tabpanel" class="tab-pane fade" id="dropdown-combine" aria-labelledby="dropdown-combine-tab"> 
 
\t \t \t <p> 
 
\t \t \t <h5><i class="fa fa-hashtag" aria-hidden="true"></i> Button Groups combined with Dropdown</h5> 
 
\t \t \t <p>you can nest dropdowns into button groups by using a seperate btn-group inside.</p> 
 
       <p> 
 
\t \t \t 
 
\t \t \t <table class="table table-sm table-responsive"> 
 
        <thead> 
 
         <tr> 
 
         <th>dropdown with btn-groups</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr> 
 
         <td> 
 
\t \t \t \t \t  <div class="btn-group" role="group"> 
 
          <button type="button" class="btn btn-primary btn-sm">Home</button> 
 
          <button type="button" class="btn btn-primary btn-sm">Service</button> 
 
          <div class="btn-group" role="group"> 
 
           <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
           About 
 
           </button> 
 
          <div class="dropdown-menu" aria-labelledby="about-us"> 
 
          <a class="dropdown-item" href="#">Portfolio</a> 
 
          <a class="dropdown-item" href="#">Impressum</a> 
 
          <a class="dropdown-item" href="#">Contact</a> 
 
          </div> 
 
          </div> 
 
         </div> 
 
\t \t \t \t \t </td> 
 
         </tr> 
 
        </tbody> 
 
        </table> 
 
\t \t \t \t  
 
       </p> 
 
      </div> 
 
      <div role="tabpanel" class="tab-pane fade" id="dropdown-split" aria-labelledby="dropdown-split-tab"> 
 
\t \t \t <p> 
 
       <h5><i class="fa fa-hashtag" aria-hidden="true"></i> Split Dropdown's</h5> 
 
\t \t \t <p>With button groups you can creat a split dropdown-menu</p> 
 
       <p> 
 
\t \t \t <table class="table table-sm table-responsive"> 
 
        <thead> 
 
         <tr> 
 
         <th>Split Dopdown's</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr> 
 
         <td> 
 
\t \t \t \t \t  <div class="btn-group"> 
 
          <button type="button" class="btn btn-primary btn-sm">About</button> 
 
          <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
          <span class="sr-only">Toggle Dropdown</span> 
 
          </button> 
 
          <div class="dropdown-menu"> 
 
           <a class="dropdown-item" href="#">Portfolio</a> 
 
           <a class="dropdown-item" href="#">Impressum</a> 
 
           <a class="dropdown-item" href="#">Contact</a> 
 
          </div> 
 
         </div> 
 
\t \t \t \t \t </td> 
 
         </tr> 
 
        </tbody> 
 
        </table> 
 
\t \t \t \t </p> 
 
      </div> 
 
      </div>

Answer 1

<p>要素内h5および/または<div>を使用しないでください。また、ここにjquery.easingテザー は私のコードで、wow.js。

また、表示されないようにタブペインからfadeを削除してください。

http://www.codeply.com/go/zMxKl2Zpq2