单击标签链接后，引导程序标签内容将不会打开

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