タブリンク

をクリックした後にブートストラップタブのコンテンツが開かないというのは私の意見ではコードは正常に見えますが、私は基本的にドキュメントのサンプルコードを使用しました。 jQueryは、bootstrap.jsの前にも参照されます。ここで何が問題になるのでしょうか？アクティブでない他のタブをクリックすると、最初のタブの内容しか表示されません。タブリンク

 <section id="how-it-works"> 
     <div class="container"> 
     <div class="wizard"> 
      <div class="wizard-inner"> 
      <div class="connecting-line"></div> 
       <ul class="nav nav-tabs"> 

       <li class="active"> 
        <a href="#tab1" data-toggle="tab" aria-controls="tab1" role="tab" title="Step 1"> 
         <span class="round-tab"> 
          <i class="glyphicon glyphicon-folder-open"></i> 
         </span> 
        </a> 
       </li> 

       <li> 
        <a href="#tab2" data-toggle="tab" aria-controls="tab2" role="tab" title="Step 2"> 
         <span class="round-tab"> 
          <i class="glyphicon glyphicon-pencil"></i> 
         </span> 
        </a> 
       </li> 

       <li> 
        <a href="#tab3" data-toggle="tab" aria-controls="tab3" role="tab" title="Step 3"> 
         <span class="round-tab"> 
          <i class="glyphicon glyphicon-picture"></i> 
         </span> 
        </a> 
       </li> 

       <li> 
        <a href="#tab4" data-toggle="tab" aria-controls="tab4" role="tab" title="That's It!"> 
         <span class="round-tab"> 
          <i class="glyphicon glyphicon-ok"></i> 
         </span> 
        </a> 
       </li> 
      </ul> 
     </div> 

      <div class="tab-content"> 
      <div class="tab-pane active" id="#tab1" role="tabpanel"> 
       <h3>Step 1</h3> 
       <p>This is step 1</p> 
      </div> 
      <div class="tab-pane" id="#tab2" role="tabpanel"> 
       <h3>Step 2</h3> 
       <p>This is step 2</p> 
      </div> 
      <div class="tab-pane" id="#tab3" role="tabpanel"> 
       <h3>Step 3</h3> 
       <p>This is step 3</p> 
      </div> 
      <div class="tab-pane" id="#tab4" role="tabpanel"> 
       <h3>Step 4</h3> 
       <p>That's It!</p> 
      </div> 
      </div> 
     </div> 
     </div> 
    </section>

出典

2017-10-09 gratschultz2013