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

本文关键字：按钮 单击 选项 | 更新日期: 2023-09-27 18:12:17

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

，但我需要添加一个'下一个按钮'内的标签内容，每当用户点击它会把用户到下一个标签。如何为该按钮编写脚本，我希望使用asp:按钮控件小提琴: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>

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

通常:您可以通过以下几种方式激活单个选项卡:

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

#标签

但是，你的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

相关文章：