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
看起來我們需要看到更多的代碼來理解如何給出答案。就我個人而言,我可能會做一個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