Question

我使用bootstrap创建了3个选项卡，一切正常。

但我需要添加一个＆＃39;下一个按钮＆＃39;在选项卡内容中，每当用户点击它时，都会将用户带到下一个选项卡。如何为该按钮编写脚本，我希望使用asp：button控件小提琴：http://www.bootply.com/B2JQzjZDZH

的javascript：

 $(document).ready(function () {
              $('[data-toggle="btns"] .btn').on('click', function () {
                  var $this = $(this);
                  $this.parent().find('.active').removeClass('active');
                  $this.addClass('active');
              });
          });

HTML：

<div class="btn-group form-group" data-toggle="btns">
   <a class="btn btn-default active" href="#first" data-toggle="tab">step 1</a>
   <a class="btn btn-default" href="#second" data-toggle="tab">step 2</a>
   <a class="btn btn-default" href="#third" data-toggle="tab">step 3</a><br>
                    </div>
<div class="tab-content" runat="server" id="divContent">
<div class="tab-pane active" id="first">
content 1
  <button type="button">next</button>
</div>

<div class="tab-pane" id="second">
content 2
  <button type="button">next</button>
</div>

<div class="tab-pane" id="third">
    content 3
  </div>
</div>

Answer 1

通常：您可以通过多种方式激活各个标签：

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

来自http://getbootstrap.com/javascript/#tabs

但是，您的HTML并不完全符合Bootstrap的使用。要使其工作，您应该使用：

<ul class="nav nav-tabs" role="tablist" id="myTab">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

但是，在您的情况下，您也可以通过更改选项卡窗格的活动类和选项卡本身来实现。

以下是您的示例http://www.bootply.com/q00EhgVnSG

单击按钮上的更改切换选项卡

1 个答案: