根据标签内的文本链接中的哈希 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 的新手。我在锚链接中添加了一个名为 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 作为被点击的锚链接的 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 脚本，如上图所示。

感谢大家的帮助和提示。如果有人有更清洁的方法，请随时发布。

和平

Answer 2

不确定这是否是您需要的，但看看这是否有效。

这是working fiddle。

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
    <p>This is tab ONE</p>
    <p><a href="#" class="next">Go to next tab</a></p>
    <p><a href="#" class="prev">Go to prev tab</a></p>
</div>
<div id="tabs-2">
    <p>This is tab TWO</p>
    <p><a href="#" class="next">Go to next tab</a></p>
    <p><a href="#" class="prev">Go to prev tab</a></p>
</div>
<div id="tabs-3">
    <p>This is tab THREE</p>
    <p><a href="#" class="next">Go to next tab</a></p>
    <p><a href="#" class="prev">Go to prev tab</a></p>
</div>

$("#tabs").tabs();

$("#tabs div a").on("click", function(){
    var idx = Number($(this).parent().parent().attr('id').replace('tabs-','')) - 1;
    if($(this).attr('class') == 'next'){
        $( "#tabs" ).tabs( "option", "selected", idx + 1 );            
    }
    else{
        $( "#tabs" ).tabs( "option", "selected", idx - 1 );
    }
 });

Answer 3

我认为您的函数tabJump 可能有效。只需将方法select 的调用更改为仅使用数字（thisID）而不是与字符串“#tabs-”连接。

像这样：

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" , thisID);
};