單擊標籤鏈接後，引導程序標籤內容將不會打開

在我看來，代碼看起來很好，我基本上使用了文檔中的示例代碼。 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