如何使用jquery工具在多个选项卡中跳转到指定的选项卡

How to jump to a specified tab in a multiple tab make with jquery tools

本文关键字:选项 何使用 工具 jquery      更新时间:2023-09-26

对不起,我是jquery和工具的新手。。。

我在页面中使用了多个选项卡,如果链接不在选项卡的包装中,我就无法创建打开选项卡的链接。

这是我的html代码:

<a href="#tab2">AN EXTERNAL LINK TO TAB2</a>
<div>
    <div class="wrap">
        <ul class="tabs">
            <li class="current"><a href="#tab1">Tab 1</a></li>
            <li><a href="#tab2">Tab 2</a></li>
            <li><a href="#tab3">Tab 3</a></li>
        </ul>
        <div class="pane">content with <a href="#tab2">A INTERNAL LINK TO TAB 2</a></div>
        <div class="pane">content</div>
        <div class="pane">content</div>
    </div>   
</div>
<div>
    <div class="wrap">
        <ul class="tabs">
            <li class="current"><a href="#tab5">Tab4</a></li>
            <li><a href="#tab5">Tab 4</a></li>
            <li><a href="#tab6">Tab 6</a></li>
        </ul>
       <div class="pane">content</div>
        <div class="pane">content</div>
        <div class="pane">content</div>
    </div>   
</div>

我的剧本到底是对的吗?脚本:

<script>
    // perform JavaScript after the document is scriptable.
    $(function() {
        $("ul.tabs").tabs("> .pane");
    });
</script>

我缺了什么?我认为有多个选项卡是可能的。。。

非常感谢你的帮助。

单击目标链接时,您可以在所需选项卡上触发单击事件。在这种情况下,您希望为选项卡和链接分配类名,因为它们比属性选择器(如[href=#tab2])快一点。

因此,在您的HTML:中

<a href="#tab2" class="target-tab-2">AN EXTERNAL LINK TO TAB2</a>
...
<li><a href="#tab2" class="tab-2">Tab 2</a></li>

JS:

$('.target-tab-2').click(function (e) { $('.tab-2').click(); e.preventDefault(); });