使用Jquery单击时切换引导选项卡

我想在单击按钮时切换选项卡。在我的情况下，当我点击下一个按钮时，它工作正常，而当我点击上一个按钮时，它不工作

单击此处查看我得到的信息

---

请检查工作示例

Html代码

---

我已将您的代码转换为工作代码段，将

.tabs（show）

更改为仅

.show

，因为您没有确切指定要使用的

选项卡。它看起来像预期的那样工作-你能具体地缩小到哪个部分“不工作”吗，因为下一个/上一个看起来工作相同。它不工作你添加了一个
按钮
。。。到底什么是“不工作”？@freedomn-m$（'#previous'）。在（'click'，函数（事件）{$（'#mytabs a[href=“#home”]'）。show（）}它不会进入“主页”选项卡。好吧，现在你已经删除了显示上一个按钮的“下一步”按钮的代码，因此很明显，上一个按钮点击不会起任何作用，因为它没有被触发。对我来说，它不起作用，我刚刚编辑了我的代码，你可以检查一下你是否在
小提琴
中检查了工作演示，你需要添加
数据-Index
在
锚定标记中。是的，兄弟，我已经在我的项目中添加了代码，但是选项卡内容没有打开单击并检查兄弟我如何在这里获得结果只有
选项卡
，当你单击
下一步按钮时，没有
活动

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
           <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">

        <ul class="nav nav-tabs" role="tablist" id="mytabs">
        <li class="nav-item">
        <a class="nav-link active" id="home" data-toggle="tab" href="#home">Home</a>
        </li>
        <li class="nav-item">
        <a class="nav-link disabled" id="second" data-toggle="tab" href="#menu1">Menu 1</a>
        </li>
     </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div id="home" class="container tab-pane active"><br>
        <h3>HOME</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="menu1" class="container tab-pane fade"><br>
        <h3>Menu 1</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>



  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" style="display:none" id="previous">Previous</button>
    <button type="button" class="btn btn-secondary" id="next">Next</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

$('#previous').on('click',function(event){

     event.preventDefault();
    $('#home').removeClass('disabled');
    $('#mytabs a[href="#home"]').tab('show');
    $('#previous').css('display','none');
    $('#second').addClass('disabled');
    $('#next').css('display','inline');

});

<ul class="nav nav-tabs" role="tablist" id="mytabs">
        <li class="nav-item" >
             <a data-index="1" class="nav-link active jsMenu" id="home" data-toggle="tab" href="#home">Home</a>
        </li>
        <li class="nav-item" >
              <a data-index="2" class="nav-link disabled jsMenu" id="second" data-toggle="tab" href="#menu1">Menu 1</a>
        </li>
         <li  class="nav-item" data-index="2">
              <a data-index="3" class="nav-link disabled jsMenu" id="second" data-toggle="tab" href="#menu1">Menu 2</a>
        </li>
     </ul>
<button id="next">
Next
</button>
<button id="previous">
previous
</button>

$(document).ready(function(){
     var mytabs =$("#mytabs");
   var oCuurentActive,NextID,PreviousID;
   $('#next').on('click', function(event) {     
            oCuurentActive = $("#mytabs li > a.active");      
      NextID = (parseInt($(oCuurentActive).attr('data-index')) + 1);
      $(mytabs).find("li a").addClass('disabled');   
      $(mytabs).find("li a").removeClass('active');   
      $(mytabs).find("li a[data-index='"+NextID+"']").removeClass("disabled").addClass('active');

    });

    $('#previous').on('click', function(event) {  
        oCuurentActive = $("#mytabs li > a.active");
     console.log($(oCuurentActive).attr('data-index'));
     PreviousID = (parseInt($(oCuurentActive).attr('data-index')) - 1);
    $(mytabs).find("li a").addClass('disabled');
    $(mytabs).find("li a").removeClass('active');   
    $(mytabs).find("li a[data-index='"+(PreviousID)+"']").removeClass("disabled").addClass('active');

    });
});