javascript - 根据选项卡内的文本链接的哈希 ID 动态选择 jquery UI 选项卡

Question

我有一组由 CMS 生成的 jQuery UI 选项卡，因此每个页面的内容都会不同。一些选项卡集可能有两个选项卡，其他选项卡可能有 5 个等等。

我四处寻找解决此问题的简单方法，但似乎找不到。我查看了历史插件以及备用代码。

这是我的示例标记

<div id="tabs"> 
<ul>
<li><a href="#tabs-1">TAB 1 HEADING</a></li>
<li><a href="#tabs-2">TAB 2 HEADING</a></li>
<li><a href="#tabs-3">TAB 2 HEADING<a></li>
<li><a href="#tabs-4">TAB 3 HEADING</a></li>
</ul>
</div>

<div id="tabs-1">tab1 content here</div>
<div id="tabs-2">tab2 content here</div>
<div id="tabs-3">tab2 content here</div>
<div id="tabs-4">tab4 content here</div>

我想创建一个脚本，允许用户从选项卡式内容中的文本链接中交替选择一个选项卡。因此，例如，在选项卡内容 div 中，链接到第三个选项卡，就像选项卡导航一样。我不想在脚本中手动编写所需选项卡的索引。

我知道这会奏效，但我想在我所有的标签内容中创建更强大的东西。

$("#tabs").tabs("select" , "#tab-4");

这是我目前所拥有的，但似乎没有用。我是 jQuery 的新手。我在 anchor 链接中添加了一个名为 tabJump 的 onlick。

function tabJump(){
    //get href ID as a number
    var thisID = Number($(this).attr('href').replace(/#tabs-/, '')) - 1;
    // this should trigger the new tab based on this href id.
    $("#tabs").tabs("select" , "#tabs-" + thisID);
};  

关于如何让它发挥作用的想法？本质上，我想要将标签的任何 ID 作为被单击的 anchor 链接的 href，并通过这个给定的 ID 定位新标签。我希望有多个带有这些 id href 的链接实例。

提前致谢。

Answer 1

好的，谢谢大家，终于弄明白我需要什么了。

如果有人觉得这有用，我会在下面分享。

点击启动函数

<p><a href="#tabs-4" onclick="tabJump(this);">my text link</a></p>

和脚本

function tabJump(obj) {
//grab the id in the clicked links href
var thisID = Number($(obj).attr('href').replace(/#tabs-/, ''));
//use this ID to trigger the click on the set of tabs
$("#tabs").tabs("select", "#tabs-" + thisID); 
//then scroll to the top of the tabs set
$('html, body').animate({
     scrollTop: $("#tabs").offset().top
 });

};

所以我使用它的方式是，一旦在我的 CMS 中的文章中创建了选项卡中的内容，我将以 4 或 10 个选项卡结束。然后第一个选项卡中有一些副本需要链接到选项卡 4。所以我向链接添加了一个 onclick 并在需要时附加 jQuery 脚本，如上图所示。

感谢大家的帮助和提示。如果有人有更简洁的方法来执行此操作，请随时发布。

和平