如何防止每次重新加載Ajax選項卡？

關於這個話題有許多問題，但他們似乎想要我正在尋找的相反！如何防止每次重新加載Ajax選項卡？

我已經通過添加和刪除（類似於：http://jqueryui.com/tabs/#manipulation）實現了jQuery選項卡，但每個頁面的內容都是通過Ajax（類似於：http://jqueryui.com/tabs/#ajax）拉動的。

這工作正常，但我想要在打開的標籤之間進行交換，而不是內容被重新加載並且每次都重新進行重置。原因是每個選項卡的內容都包含文本高亮顯示功能（不同的複選框高亮顯示不同的單詞），我希望選中的複選框在取消選中時保留。

有沒有任何交換標籤，而無需每次重新加載的方式？

//Tab variables 
var tabTitle = $("#tab_title"), 
tabContent = $("#tab_content"), 
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>", 
documentTabCounter = 0, 
entityTabCounter = 0, 
tabs = $("#tabs").tabs(); 

//On document load, generate the tabs 
$(document).ready(function() { 
tabs.tabs(); 
});   

function addDocumentTab(document_id, document_name) { 
var nameToCheck = document_name; 
var numberOfTabs = 0; 
var targetTab = 0; 
var tabNameExists = false; 

//Loop through the open tabs to check whether the tab is already open (by comparing names) 
$('#tabs ul li a').each(function(i) { 
    numberOfTabs++; 
    if (this.text == nameToCheck) {  
     tabNameExists = true; 
     targetTab = numberOfTabs; 
    } 
}); 
//If the tab is not already open, then open a new tab 
if (!tabNameExists){ 
    var label = tabTitle.val() || document_name, 
    id = "tabs-" + documentTabCounter, 
    li = $(tabTemplate.replace(/#\{href\}/g, js_base_url+'document/'+document_id).replace(/#\{label\}/g, label)); 
    tabs.find(".ui-tabs-nav").append(li); 
    tabs.tabs("refresh"); 
    tabs.tabs("option", "active", documentTabCounter); 
    documentTabCounter++; 
} 
//If the tab is already open, then make it active 
else { 
    tabs.tabs("option", "active", targetTab-1); 
}  
};`

來源

2013-07-22 davidofyork

就隱藏其他選項卡，並顯示新的一個這樣的例子

$('.tab-buttons').on('click', function(){ 

    $('.tabs').hide(); 

    // Show the tab you wan't 
    $('.the-tab-to-show').show(); 

    // Or depending on your layout 
    $(this).find('.tab').show(); 

});

此外，如果你還需要防止ajax請求，那麼

添加data-loaded="true"當元素爲ajax完成
只運行選項卡上的Ajax請求，如果它沒有得到data-loaded="true"屬性

來源

2013-07-22 20:51:36 iConnor

謝謝，這真的很有幫助。我只是不確定如何在Tabs小部件的約束範圍內實現它。目前，我在標籤之間切換： 'tabs.tabs（「option」，「active」，targetTab）;' 「active」選項實際上做了什麼？我可以適應它嗎？ – davidofyork

如果你告訴我你的ajax是如何被調用的，我可能會幫助你。 – iConnor

完成，但我不確定它會有多大的幫助！ – davidofyork

你可以存儲你從AJAX拉一個變量或隱藏的HTML元素，只有信息在沒有存儲信息的情況下進行AJAX調用。

來源

2013-07-22 20:52:23 taylorc93

如何防止每次重新加載Ajax選項卡？

回答

相關問題