使用 Jquery 单击时切换 bootstrap 选项卡

Question

我想在点击按钮时切换标签页。在我的例子中，当我点击下一个按钮时它工作正常，当我点击上一个按钮时它不起作用。

点击此处查看我得到了什么https://jsfiddle.net/g216ex0v/2/

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

HTML代码

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

jquery代码

$('#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');

});

Answer 1

请检查工作示例Click here

Html Code

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

Jquery Code

$(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');

    });
});

使用 Jquery 单击时切换 bootstrap 选项卡

Switching bootstrap tabs when Onclick using Jquery

jquery

twitter-bootstrap

bootstrap-tabs