Ä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?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Könntest du die jQuery-die nächste Registerkarte zu aktivieren und dessen Inhalt. Geben Sie alle Ihre weiter-Tasten eine Klasse wie "weiter" und dann können Sie so etwas tun..
Demo auf Bootply: http://bootply.com/112163
Gerade diese viel elegantere Lösung...
aus: http://info.michael-simons.eu/2012/07/30/twitter-bootstrap-make-the-default-pills-more-usable/
könnte man hinzufügen-Ids zu den Pillen (step1tab, etc) und dann machen Sie eine Funktion eine Funktion wie diese:
und fügen Sie diese an die Anker-Tags text:
this.activate($this.parent('li'), $ul)
Ich gehackt das fiddle: http://jsfiddle.net/MvY4x/7/
Wirklich ein bad-ass-hack, braucht Verbesserung, aber kann eine Vorstellung...