jQuery Tabs mit Next/Previous-Taste

Question

Ich versuche, JQuery-Registerkarten mit Next und Zurück-Schaltflächen zu erreichen. Ich befestige ein Bild von dem, was ich versuche zu tun. Wie im Mock-Up sollte die Schaltfläche zum Fortfahren auf der ersten Registerkarte aktiv sein, aber wenn Sie zu Tab-2 gelangen, sollte die Schaltfläche standardmäßig deaktiviert und aktiv sein, wenn btn-1 und btn-2 angeklickt werden und aktiv bleiben während der Benutzersitzung.

Beachten Sie, dass alle anderen Registerkarten Inhalte von anderen Seiten abrufen, mit Ausnahme von Registerkarte-1, bei der es sich um eine statische Seite handelt.

ich bereits diese Stackoverflow-Lösung versucht, aber hat nicht funktioniert. Links/button disabled until another button is clicked

Unten ist der HTML-Markup.

<div class="tabContainer"> 
    <div class="tabContent" id="tab1"> 
    <h3>Tab Content 1</h3> 
    <p> 
     Cu iudico rationibus eum, ne duo elit nostrum constituam. Mea ea atqui minim. Eros primis persius eu sed. Usu cu aperiri utroque. 
     An per voluptua phaedrum percipitur, ne ius scribentur dissentiunt. Lobortis principes est te, inermis placerat hendrerit mea ne, duo dicat nonumy sententiae an. 
     An mel eius noster, dolore vituperata efficiendi pro at. Electram incorrupte mea at, percipit torquatos instructior sed eu, unum dolores ne vel. 
     Id has tacimates intellegam, putent recusabo corrumpit nam ea. 
    </p> 
    <button class="next" onclick="">Proceed to Next Step</button> 
    </div> 
    <div class="tabContent" id="tab2"> 
    <button class="completed" onclick="">update</button> 
    <button class="next" onclick="">Proceed to Next Step</button> 
    </div> 
    <div class="tabContent" id="tab3"> 
    <button class="next" onclick="">Proceed to Next Step</button> 
    </div> 
    <div class="tabContent" id="tab4"> 
     <button class="next" onclick="">Proceed to Next Step</button> 
    </div> 
</div> 

Answer 1

Ich gehe davon aus, dass der Benutzer auf tab1, tab2 zu klickt, und dass zur nächsten Taste fortfahren würde nur dann, wenn button1 und button2 aktiv bleiben, beide angeklickt werden.

Nun, fügen Sie ein Ereignis zu Registerkarte2, die die Schaltfläche zum nächsten fortfahren würde.

Und entfernen Sie dieses Ereignis von Tab2, sobald Sie auf button1 und button2 klicken, und setzen Sie disable auf false.

Answer 2

Ich bin zu gut verstehen nicht sicher, was du meinst, aber das ist mein Vorschlag:

$(document).ready(function(){ 
    $('.next').attr('disabled', 'disabled'); 
}); 

$('#btn1, #btn2').click(function(){ 
    $(this).siblings('.next').removeAttr('disabled'); 
}); 

    $('.tabContent').click(function(){ 
     $('.next').attr('disabled', 'disabled');// to disable new added next buttons 
    }); 

Answer 3

Wie pro mein Verständnis Sie zur nächsten Taste fortfahren aktiviert werden soll, wenn button1 und Taste 2 beide angeklickt werden.

Dazu müssen Sie nur einen Status hinzufügen Schaltfläche mit Daten api() angeklickt und dann auf Ereignisprüfung für beide Schaltfläche Status klicken, wenn sie True sind, aktivieren Sie mit der nächsten Schaltfläche fortfahren.

Versuchen Sie es.

$(function(){ 
 
    $("#btn1,#btn2").click(function(){ 
 
    $(this).data("clicked","1"); 
 
    var btn1Clicked = $("#btn1").data("clicked"); 
 
    var btn2Clicked = $("#btn2").data("clicked"); 
 
    if(btn1Clicked && btn2Clicked) 
 
     { 
 
     $("#btn3").prop("disabled",false); 
 
     } 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btn1" type="button">Burron 1</button> 
 
<button id="btn2" type="button"> Button 2</button> 
 
<button id="btn3" type="button" disabled> Go to next button</button>

Ich hoffe, dass es Ihnen helfen.