将#ui-tabs中的jQuery选项卡ID重命名为其他内容

时间:2014-08-28 10:32:29

标签: jquery ajax jquery-ui tabs lazy-loading

我有jQuery选项卡,单击选项卡时其内容是延迟加载的。这很有效。

<div id='tabs'>
    <ul>
        <li><a href='url-to-content'><span>John</span></a></li>
        <li><a href='url-to-content'><span>Arnold</span></a></li>
        <li><a href='url-to-content'><span>Dilbert</span></a></li>
    </ul>
</div>

我希望直接链接到特定标签,以便使用该链接打开该特定标签。这可以通过例如

来实现
http://www.example.com/tab_page#ui-tabs-2

我希望将“ui-tabs-2”替换为有意义的内容,例如在这种情况下

http://www.example.com/tab_page#dilbert

所以基本上我希望能够将标签ID从jQuery默认的'ui-tabs-1','ui-tabs-2'等重命名为其他内容。

当内容没有延迟加载时,这很容易,因为我自己创建了标签DIV和ID。但是通过延迟加载,dQuery创建由jQuery处理,我找不到影响它的方法。

我已尝试将锚点放在网址中,如此

        <li><a href='url-to-content#dilbert'><span>Dilbert</span></a></li>

不要太惊讶,它不起作用。

我知道hash#之后的DIV id对接受的字符有限制,但这不是问题。该部分与选项卡可见名称不完全相同,但只是关闭。

这是我的第一个问题,我已经研究了几个小时的问题,但没有运气。如果之前已经讨论过这个问题我会道歉,如果是这样,请向该问题寻求链接。我以前未能找到这个问题。

使用jQuery v1.11.1和jQuery UI - v1.10.4(最新版本)。


更新

基于blgt的想法,我编写了一个具有相同概念但实现略有不同的工作解决方案。在现实生活中,标签的数量每次都不一样,所以我最终创建了一个JavaScript对象,然后使用它来选择标签,如下所示:

var tabs = {
    '#john' : 0,
    '#arnold' : 1,
    '#dilbert' : 2

    // There are more tabs
}

if(window.location.hash in tabs) {
    $('#tabs').tabs('option', 'active', tabs[window.location.hash]);
}

1 个答案:

答案 0 :(得分:0)

好吧,我不知道是否有HTML方法可以做到这一点(如果有的话,它可能会更干净),但你总是可以以编程方式进行。

location.hash包含#符号后面的网址部分(包括#符号本身),tabs.options.active可用于以编程方式交换制表符。完整版本如下所示:

$("#tabs").tabs(); // create the tabs widget first
if(window.location.hash === '#John') {
    $("#tabs").tabs('option', 'active', 0);
} else if(window.location.hash === '#Arnold') {
    $("#tabs").tabs('option', 'active', 1);
} else if(window.location.hash === '#Dilbert') {
    $("#tabs").tabs('option', 'active', 2);
}

或者使用变量立即实例化选项:

var activeTab = window.location.hash === '#John' ? 0 : ... etc;
$("#tabs").tabs({active:activeTab});