Question

关于这个主题有很多问题，但它们似乎想要与我正在寻找的相反！

我已经实现了jQuery选项卡添加和删除（类似于：http://jqueryui.com/tabs/#manipulation），但每个页面的内容都是通过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);
}       
};`

Answer 1

只需隐藏其他标签并显示新的标签，例如

$('.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 添加到元素
如果没有 data-loaded="true" 属性，则只在标签上运行ajax请求

Answer 2

您可以将从AJAX中提取的信息存储在变量或隐藏的html元素中，并且只有在没有存储信息时才进行AJAX调用。

如何防止每次重新加载Ajax选项卡？

2 个答案: