首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >将jQuery选项卡ID从#ui-选项卡重命名为其他选项卡

将jQuery选项卡ID从#ui-选项卡重命名为其他选项卡
EN

Stack Overflow用户
提问于 2014-08-28 10:32:28
回答 1查看 251关注 0票数 0

我有jQuery选项卡,其内容在单击选项卡时被延迟加载。这个很好用。

代码语言:javascript
运行
复制
<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>

我想有直接的链接到特定的标签,以便这个特定的选项卡与该链接打开。例如,这是通过以下方式实现的

代码语言:javascript
运行
复制
http://www.example.com/tab_page#ui-tabs-2

我希望将“ui-tabs 2”替换为一些有意义的内容,例如在本例中。

代码语言:javascript
运行
复制
http://www.example.com/tab_page#dilbert

因此,基本上,我希望能够将标签‘d从jQuery默认的’ui-选项卡-1‘、’ui-选项卡-2‘等重命名为其他东西。

当内容不是延迟加载时,这很容易,因为我自己创建了选项卡DIVs和ID。但是由于延迟加载,jQuery负责DIV的创建,我无法找到影响它的方法。

我尝试过在URL中放置锚,如下所示

代码语言:javascript
运行
复制
        <li><a href='url-to-content#dilbert'><span>Dilbert</span></a></li>

没什么好惊讶的,没什么用。

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

这是我的第一个问题,我已经研究了几个小时,但没有运气。如果之前已经讨论过这个问题,我很抱歉,如果是的话,请提供到这个问题的链接。我以前从未发现过这个问题。

使用jQuery v1.11.1和jQuery UI - v1.10.4 (都是最近的)。

更新

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

代码语言: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]);
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-08-28 13:52:18

嗯,我不知道是否有HTML方法(如果有的话,它可能会更干净),但是你总是可以编程的。

location.hash包含#符号后面的url部分(包括#符号本身),tabs.options.active可以用于编程交换选项卡。完整的版本如下所示:

代码语言:javascript
运行
复制
$("#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);
}

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

代码语言:javascript
运行
复制
var activeTab = window.location.hash === '#John' ? 0 : ... etc;
$("#tabs").tabs({active:activeTab});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25546631

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档