根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡

dynamically select jquery UI tabs based on hash ID from a text link inside tabs

本文关键字：选项 ID 动态 jqueryUI 选择 哈希 文本 内部 链接      更新时间：2023-09-26

我有一组由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的链接到锚链接。

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 hrefs的链接的多个实例。

提前谢谢。

好的，谢谢大家，终于找到了我需要的东西。

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

点击启动功能

<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脚本，如上所示。

谢谢大家的帮助和建议。如果有人有更干净的方法，请随意发帖。

和平

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

这是一把正在工作的小提琴。

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

我认为函数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);
};
相关文章：