Bootstrap Registerkarte Inhalt wird nicht geöffnet nach dem Klicken auf Registerkarte Link

Question

Code sieht gut aus meiner Meinung, ich habe im Grunde genommen den Beispielcode aus der Dokumentation. jQuery wird auch vor bootstrap.js referenziert. Was könnte das Problem hier sein? Wenn ich auf einen anderen Tab klicke, der nicht aktiv ist, wird nur der erste Tabs-Inhalt angezeigt.

 <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> 

Answer 1

Versuchen Sie, die # in der ID jeder Tab unter Registerkarte Inhalt zu entfernen.

id="#tab4" to id="tab4" 

Auch getaggt Sie Bootstrap-3, aber der Code, den Sie Aussehen verwenden, wie es aus Bootstrap ist 4.

https://v4-alpha.getbootstrap.com/components/navs/