Ändern der aktiven-Klasse, sowie Inhalte in nav-pills

Grundsätzlich bin ich versucht zu erstellen, ein "wizard" über bootstrap, wenn die aktive Registerkarte ändert, wenn der "weiter" - button geklickt wird. Ich habe es geschafft, kommen mit dem folgenden code:

<div id="rootwizard">
   <div class="navbar">
      <div class="navbar-inner">
         <div class="container">
            <ul class="nav nav-pills">
               <li class="active"><a href="#step1" data-toggle="tab">Step 1</a></li>
               <li><a href="#step2" data-toggle="tab">Step 2</a></li>
               <li><a href="#step3" data-toggle="tab">Step 3</a></li>
            </ul>
         </div>
      </div>
   </div>
   <div class="tab-content">
      <div class="tab-pane" id="step1">
         <a class="btn" href="#step2" data-toggle="tab">Continue</a>
      </div>
      <div class="tab-pane" id="step2">
         Step 2
         <a class="btn" href="#step3" data-toggle="tab">Continue</a>
      </div>
      <div class="tab-pane" id="step3">
         Step 3
      </div>
   </div>
</div>

Recht, jetzt funktioniert es einwandfrei, wenn ich auf der nav-Pillen selbst (der Inhalt ändert und die aktive Pille änderungen zu).
Allerdings, wenn ich auf die einzelne Schaltfläche weiter wird der Inhalt ändert sich sondern die aktive nav Pille nicht ändern.

Warum nicht die active-Klasse ändern, wie wenn ich auf die Pille selbst?

Hier ein jsFiddle mit dem code:
http://jsfiddle.net/MvY4x/5/

  • Erstellen Sie ein jsfiddle... sonst keine Hilfe denke ich
  • Ich habe den code eingefügt in ein jsFiddle aber ich konnte nicht die bootstrap-js zu arbeiten, in der es für einige seltsame Grund. Hinzugefügt jsFiddle der thread so oder so.
  • Sie brauchen fügen Sie jQuery framework zu jsfiddler. Siehe hier
  • Ahh ich sehe. Ich habe aktualisiert die jsFiddle jetzt.
  • Ist das möglich, was Sie erreichen mit bootstrap? Allerdings, wenn Sie brauchen, jquery Lösung?
InformationsquelleAutor Jamie Romeo | 2014-02-09
Schreibe einen Kommentar