bootstrap选项卡next和previous按钮不起作用

Question

我已经为标签编写了代码但是它的后续工作是html

$('.btnNext').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('.btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
    <li><a href="#tab2" data-toggle="tab">Quantities</a></li>
    <li><a href="#tab3" data-toggle="tab">Summary</a></li>
    </ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <a class="btn btn-primary btnNext">Next</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary btnNext">Next</a>
        <a class="btn btn-primary btnPrevious">Previous</a>
    </div>
    <div class="tab-pane" id="tab3">
        <a class="btn btn-primary btnPrevious">Previous</a>
    </div>
</div>

当我点击按钮时，控制台上没有任何错误发生错误

Answer 1

您的代码有效，您还没有包含bootstrap.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<强>演示

＆＃13;

＆＃13;

$('.btnNext').click(function() {
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

$('.btnPrevious').click(function() {
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
  <li><a href="#tab2" data-toggle="tab">Quantities</a></li>
  <li><a href="#tab3" data-toggle="tab">Summary</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="tab1">
    <a class="btn btn-primary btnNext">Next</a>
  </div>
  <div class="tab-pane" id="tab2">
    <a class="btn btn-primary btnNext">Next</a>
    <a class="btn btn-primary btnPrevious">Previous</a>
  </div>
  <div class="tab-pane" id="tab3">
    <a class="btn btn-primary btnPrevious">Previous</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;