带有下一个/上一个按钮的jQuery选项卡

Question

我正在尝试使用“下一步”和“后退”按钮来完成JQuery选项卡。我附上了我想要做的事情。

就像在模拟中一样，“继续”按钮应该在第一个选项卡中处于活动状态，但是当你到达tab-2时，默认情况下应禁用该按钮，并在单击btn-1和btn-2时激活该按钮并保持活动状态用户会话。

请注意，除了tab-1（静态页面）之外，所有其他选项卡都会从其他页面中提取内容。

我已经尝试过这种stackoverflow解决方案但是没有用。 Links/button disabled until another button is clicked

以下是html标记。

<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

我假设用户也点击了tab1，tab2，并且只有当click1和button2都被点击时，前进到下一个按钮才会保持活动状态。

好吧，向tab2添加一个事件，这将禁止前进到下一个按钮。

单击button1和button2后，从tab2中删除该事件，并将disable设置为false。

Answer 2

我不确定你理解你的意思，但这是我的建议：

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

根据我的理解，如果单击button1和按钮2，则要启用下一个按钮。

为此你只需要使用数据api（）为点击按钮添加一个状态，然后点击事件检查两个按钮状态是否为真，启用进入下一个按钮。

试试这个。

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

我希望它会对你有所帮助。