Bootstrap 3.2.0：我如何在選擇的選項卡上保存選定的選項卡？

我有一個問題，其中當我發佈一個選項卡下的東西時，我會返回到活動選項卡時提交按鈕被單擊。例如，我張貼在悲劇標籤上，我又回到天氣標籤這是我的活動標籤。我的繼承人代碼Bootstrap 3.2.0：我如何在選擇的選項卡上保存選定的選項卡？

繼承人的代碼

<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a href="#weather" data-toggle="tab">Weather</a></li> 
    <li class=""><a href="#traffic" data-toggle="tab">Traffic</a></li> 
    <li class=""><a href="#accident" data-toggle="tab">Accident</a></li> 
    <li class=""><a href="#politics" data-toggle="tab">Politics</a></li> 
    <li class=""><a href="#tragedies" data-toggle="tab">Tragedies</a></li> 
    <li class=""><a href="#warnings" data-toggle="tab">Warnings</a></li> 

</ul>

完整的源代碼是這裏的一部分：http://pastebin.com/Mn9WJ9qj

我搜索了一些JavaScript的使用，但它仍然不能與我的代碼的幫助。

來源

2014-10-27 user3865549

看起來我們需要看到更多的代碼來理解如何給出答案。就我個人而言，我可能會做一個Ajax帖子，而不是一個經典的，它會保留你的頁面狀態。 – DavidG 2014-10-27 08:47:17

我們的教授要求我們使用這個，因爲我們的項目是關於企業java的，但我們只是需要HTML設計，但我們仍然可以使用引導 – user3865549 2014-10-27 08:49:43

我的意思是，你應該保留你擁有的一切，但使用'jQuery'來發布數據阿賈克斯呼籲。 – DavidG 2014-10-27 08:51:42

Togglable選項卡插件已打算在單個頁面上使用。單擊一個選項卡會觸發一個哈希標記導航，如#tab2，哈希標記鏈接不會重新加載頁面，javascript插件捕獲點擊並將選項卡活動基於哈希標記。

在你的代碼中，表單有一個設置爲頁面的動作（weathercomment.html），而不是錨點。因此，提交表單重新加載頁面（並將硬編碼爲class="active"的選項卡再次設置爲活動選項卡）。

如果確實需要在提交後加載不同的頁面（url），則應根據request_uri動態編碼class="active"。

或者，您可以在窗體的提交事件中返回false，該窗體不會重新加載頁面。（另見：How to prevent buttons from submitting forms）。在返回false之前，您可以使用表單輸入值更新數據庫或執行其他操作。你也可以在這裏做一個ajax調用。

實施例：

HTML

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

<!-- Tab panes --> 
<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="home">...</div> 
    <div role="tabpanel" class="tab-pane" id="profile"> 
    <div id="formresponse"></div> 
    <form role="form" id="profileform"> 
    <div class="form-group"> 
    <label for="exampleInputEmail1">Email address</label> 
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
    </div> 
    <div role="tabpanel" class="tab-pane" id="messages">...</div> 
    <div role="tabpanel" class="tab-pane" id="settings">...</div> 
</div>

的javascript

$('#profileform').on('submit', function() { 
    $('#formresponse').html('Your email:' + $('#exampleInputEmail1').val()); 
    return false; 
});

演示：http://www.bootply.com/1GqfQaJLoQ

來源

2014-11-10 20:09:36

-1

我發現這個溶液到WO rk最適合我。

private void GooToTab(string tab) 
{ 
     ScriptManager.RegisterStartupScript(this, this.GetType(), "MyTabCurrent", "window.location=ClientForm1" + tab + ";", false); 
} 

protected void btnSearchAssociato_Click(object sender, EventArgs e) 
{ 
    GooToTab("#Associato"); // the tab link 

}

來源

2016-05-11 09:11:32

Bootstrap 3.2.0：我如何在選擇的選項卡上保存選定的選項卡？

回答

相關問題