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

Question

最近我一直在考虑使用这个脚本打开一个标签：

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

但是我的具体问题是我正在处理的网站并不总是加载相同的标签集。选项卡可以根据某些信息是否存在而改变。示例：

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

1. 产品数据 (#overview)
2. 规格 (#specs)
3. 配件 (#accessories)
4. 服务 (#services)
5. 客户评论 (#reviews)

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

1. 产品数据 (#overview)
2. 配件 (#accessories)

正如您想象的那样，这会产生一个问题，因为选项卡编号可以更改；规格选项卡 (#specs) 可能是第二个选项卡，也可能是第一个选项卡（如果产品数据不存在），或者规格选项卡可能根本不存在。

因此，为了争论，假设我希望定位到“规格”选项卡。我想第一件事是检查 div id #specs 是否存在。然后我想我必须创建一个以该为目标的链接。但是我可以像通常的例子（上图）那样定位一个 id 而不是标签号吗？

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

提前谢谢你。

Answer 1

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

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

var index = $('#tabs a').index($('#specs'));

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

Answer 2

创建一个包含标签ID作为键和标签索引作为值的javascript数组：

// 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;
});

Answer 3

这应该对场景有好处 你可以用你想要的条件替换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;
     }
   });
});

Answer 4

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

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