bootstrap分頁選單是用 class="active"來定義當前顯示的頁籤按鈕及內容區塊,預設定義在是第一個頁籤及區塊的class裡面,
<ul class="nav nav-tabs" role="tablist" id='movievar' name="1,<{$enshow.basid}>">
<li id='limoviebtn1' role="presentation" class="active"><a id="moviebtnfunction1" href="#moviebtn1" aria-controls="moviebtn1" role="tab" data-toggle="tab"><{$smarty.const._MD_MOVIECENTERPHP02}></a></li>
<li id='limoviebtn2' role="presentation"><a id="moviebtnfunction2" href="#moviebtn2" aria-controls="moviebtn2" role="tab" data-toggle="tab"><{$smarty.const._MD_MOVIECENTERPHP03}></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id='moviebtnbox'></div>
</div>
我們可在ajax儲存完畢後的輸出區加上變更class的設定
success: function(response) {
//刪除Class
$("#limoviebtn1").removeClass( "active" );
//加入Class
$("#limoviebtn2").addClass( "active" );
},
這樣當ajax完成頁籤1的儲存後就會自動切換到頁籤2,而不會停留在原本頁籤1頁面!不過function也要一起切換才能變更內容喔。
參考資料來源
http://api.jquery.com/removeClass/
http://api.jquery.com/addClass/
有需要的朋友可以參考看看!!
教學撰寫:徐嘉裕 Neil hsu
留言
張貼留言