开发者问题收集

bootstrap 标签下一个和上一个按钮不起作用

2018-03-14
2008

我已经为标签编写了代码,但它不起作用,以下是 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>

当我单击按钮时什么也没有发生,控制台上没有错误

1个回答

您的代码有效,只是您没有包含 bootstrap.js

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

演示

$('.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>
<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>
Carsten Løvbo Andersen
2018-03-14