阿賈克斯自舉標籤後,更換內容,原創內容(裝載機)[聯繫LTE模板]帶狀態保存
好吧我想通了:)發佈以防萬一有人會需要它也很有用。如果需要,也請重建我的問題。
出發
我用這兩個變量,以保持點擊標籤,前一個標籤的軌道清除DOM與裝載機
var targetel = $(e.target).filter($(this).attr('href'));
var prevel = $(e.relatedTarget).filter($(this).attr('href'));
接下來,我增加了一個短的睡眠對於AJAX呼叫。 [Todo也許:在樹形時間快速設置標籤的時候,它們不會取消加載,後面會加載一個xhr請求,這有點毫無意義,您知道如何防止這種情況發生? ]
然後我添加了加載程序元素。由於第一次加載時沒有以前的元素,所以需要有一個條件。不知道它是一種適當的方式來上下文,但它的工作原理。
$(targ).html('<div class="overlay text-center"><i class="fa fa-refresh fa-spin fa-5x"></i></div>');
if (prevel.context) {
$(prevel.context.hash).html('<div class="overlay text-center"><i class="fa fa-refresh fa-spin fa-5x"></i></div>');
}
另外花哨的工作人員,我沒有發佈作爲一個問題是刷新瀏覽器後的活動選項卡的狀態保存。我強制點擊 - 因爲它是xhr內容,所以我猜想只有選項,並將其保存到localStorage。這種狀態保存將在您選擇一個選項卡後生效。默認情況下沒有選擇,如果你想擁有,所以你可以做這樣的事情
$('#myTabs > li > a[href="' + activeTab + '"]').trigger('click');
其中activeTab將是鏈接的ID在<li>
。
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
$('#myTabs > li > a[href="' + activeTab + '"]').trigger('click');
}
就是這樣,如果您有任何建議,請寫信。
可以在這裏
https://jsfiddle.net/074rk3re/9/
的完整代碼