更改切換標籤點擊按鈕

我創建了3個標籤通過使用bootstrap，一切工作正常。更改切換標籤點擊按鈕

但我需要在標籤內容中添加一個'下一個按鈕'，無論何時用戶點擊它都會將用戶帶到下一個標籤。如何編寫腳本，針對該按鈕，我想用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>

來源

2014-07-09 user3431239

可能重複[如何改變Twitter的引導選項卡，按下按鈕時？]（http://stackoverflow.com/questions/9252127/how-to-change-twitter- bootstrap-tab-when-button-is-pressed） – equisde

通常情況下：您可以激活各個選項卡在幾個方面：

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

的

來源

2014-07-09 10:02:55

如果您認爲我的回答很有用，請注意它。 –

更改切換標籤點擊按鈕

回答

相關問題