jQuery UI选项卡:从链接定位动态选项卡

jQuery UI Tabs: Targeting Dynamic Tab from a Link

本文关键字：选项 定位 动态 链接 UI jQuery      更新时间：2023-09-26

最近我一直在考虑使用以下脚本打开一个选项卡：

$('.tofour').click(function() { // bind click event to link
    $tabs.tabs('select', 3); // switch to third tab
    return false;
});

然而，我的具体问题是，我正在工作的网站并不总是加载相同的选项卡集。选项卡可以根据是否存在某些信息而更改。示例：

在某些情况下，我们将有足够的数据用于：

  1. 产品数据（#概述）
  2. 规格（#规格）
  3. 附件（#附件）
  4. 服务（#服务）
  5. 客户评价（#Reviews）

在其他情况下，只有足够的数据来填充两个选项卡

  1. 产品数据（#概述）
  2. 附件（#附件）

正如你所能想象的，这会产生一个问题，因为标签号可能会更改；"规格"选项卡（#specs）可能是第二个选项卡，也可能是第一个选项卡（如果"产品数据"不存在），或者"规格"标签可能根本不存在。

因此，为了便于讨论，假设我希望以Specification选项卡为目标。我想第一件事是检查div id #specs是否存在。然后我想我必须创建一个链接，将目标。但是，我可以像上面的例子一样，以id而不是标签号为目标吗？

有人能帮忙吗？我很惭愧地承认，我的jQuery技能相当差。

我提前感谢你。

您可以通过此代码获取索引，然后检查它是否为-1（这意味着它不存在）

注意：这假设选项卡的a标签具有specs的id

var index = $('#tabs a').index($('#specs'));
if (index > -1) {
    $('#tabs').tabs('select', index);
}

创建一个javascript数组，其中包含作为键的选项卡id和作为值的选项卡索引：

// if you're using php and the tabs that need to be generated are in a variable called $tabs
// you could work this out in other languages
$count = count($tabs);
for($i=0;$i<=$count;$i++){
    $tab = $tabs[$i];
    echo 'tab_indexes[' . $tab['id'] . '] = ' . $i . ';'; // id as in #specs, etc
}

然后使用jQuery:中的数组

$('#to_specs').click(function() { // bind click event to link
    $('#tabs').tabs('select', tab_indexes['#specs']); // switch to specs tab
    return false;
});

这应该对场景有好处您可以将element.id.match('specs')替换为您想要的条件

$('.tofour').click(function(evt) {
   $('#tabs a').each(function(index,element){
     if(index != -1 && element.id.match('specs')){
     $('#tabs').tabs('select', index);
     return false;
     }
   });
});

$("#m").live('click',function(){
    $('#tabs').tabs({ selected: "#tabs-1" });
});

试试这个。让我进一步了解。

相关文章：