Hallo Ich habe seit etwa 1/2 Stunde stochern - es scheint vielleicht trivial, aber ich möchte gut für den Kunden auf diesem einen liefern.Bootstrap Nav Tab Klicken Sie auf Ereignis Works EXCEPT auf der Registerkarte Label Klicken Sie
Wir haben ein Formular eingerichtet mit Abschnitten innerhalb einer Reihe von Registerkarten. Im Moment versuche ich nur, den 'Speichern und Fortfahren' Knopf zu 'Senden' zu machen, wenn der letzte Tab aktiv ist - entweder indem der Benutzer die 'Speichern und Weiter' Taste drückt oder auf die Tabs oben - später klickt Wir werden eine Validierung der Einreichung hinzufügen, usw. Aber ich denke, dass das Arbeiten mit dem Button Text-Change mir genug vertraut macht mit dem, was (von anderen) erstellt wurde, um die komplexeren Dinge später zu erledigen.
Was funktioniert:
- Die Schaltfläche ändert sich perfekt nennen, wenn der Benutzer in der letzten Registerkarte kommt durch Anklicken der Schaltfläche.
- Die Schaltfläche ändert den Namen perfekt, wenn der Benutzer auf die letzte Registerkarte klickt ... AUSSER wenn sie auf den eigentlichen Text klicken innerhalb der Registerkarte. Das click -Ereignis wird weiterhin generiert, aber der Konsolenaufruf für die e.target.id gibt eine leere Zeichenfolge aus.
-Code für die Nav-Register:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li id="personalInfoTab" role="presentation" class="active"><a id="personalInfoLink" href="#personal-info" aria-controls="personal-info" role="tab" data-toggle="tab" class="hidden-xs"><strong>Personal Information</strong></a><a href="#personal-info" aria-controls="personal-info" role="tab" data-toggle="tab" class="visible-xs">Personal Info</a></li>
<li id="professionalInfoTab" role="presentation"><a id="professionalInfoLink" href="#professional-info" aria-controls="professional-info" role="tab" data-toggle="tab" class="hidden-xs"><strong>Professional Information</strong></a><a href="#contact-info" aria-controls="contact-info" role="tab" data-toggle="tab" class="visible-xs">Prof. Info</a></li>
<li id="expectationsTab" role="presentation"><a id="expectationsLink" href="#expectations" aria-controls="expectations" role="tab" data-toggle="tab" class="hidden-xs"><strong>Employment Expectations</strong></a><a id="expectationsLink" href="#expectations" aria-controls="expectations" role="tab" data-toggle="tab" class="visible-xs">Expectations</a></li>
<li id="settingsTab" role="presentation"><a id="settingsLink" href="#settings" aria-controls="settings" role="tab" data-toggle="tab" class="hidden-xs"><strong>Profile Settings</strong></a><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab" class="visible-xs">Settings</a></li>
</ul>-Code für den Button:
<input type="submit" name="profile-continue" class="btn btn-danger" id="continueBtn" value="Save & Continue">Und die JQuery:
\t // Check which tab is active and set the Continue Button text \t
\t function initButtons() {
\t
\t \t console.log($('#settingsTab'));
\t \t
\t if ($('#settingsTab').hasClass('active')) {
\t \t $('#continueBtn').prop('value' , 'Submit');
\t }
\t else {
\t \t $('#continueBtn').prop('value' , 'Save and Continue');
\t }
\t };
\t
\t initButtons();
\t /* The 'Continue' button behavior */
\t $('#continueBtn').click(function(){
\t \t // Activate the next tab
\t \t $('.nav-tabs > .active').next('li').find('a').trigger('click');
\t \t // Change the submit Button text accordingly
\t \t initButtons();
\t \t // Possible to-do: wrap in an 'if' statement that checks if there's any missing 'required' fields.
\t \t // Possible to-do: determine 'if' the tab selected is the last in the sequence.
\t \t // Possible to-do: grey/non-grey tabs (make accessible in sequnce).
\t \t }
\t \t);
\t
\t $('a[data-toggle="tab"]').click(function(e){
\t \t console.log(e);
\t \t console.log('Target: ' , e.target.id);
\t \t // Check what tab was picked and submit Button text accordingly
\t \t
\t \t \t if (e.target.id === 'settingsLink') {
\t \t \t \t $('#continueBtn').prop('value' , 'Submit');
\t \t \t }
\t \t \t else {
\t \t \t \t $('#continueBtn').prop('value' , 'Save and Continue');
\t \t \t }
\t \t
\t \t }
\t \t);