0

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

我已经实现了带有添加和删除的 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);
}       
};`
4

2 回答 2

2

例如，只需隐藏其他选项卡并显示新选项卡

$('.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请求，那么

  1. 完成后添加data-loaded="true"到元素ajax
  2. 只有在没有获得data-loaded="true"属性的情况下才在选项卡上运行 ajax 请求
于 2013-07-22T20:51:36.510 回答
0

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

于 2013-07-22T20:52:23.197 回答