JQuery 和选项卡 - 直接 URL答案

【问题标题】：JQuery and tabs - direct URLJQuery 和选项卡 - 直接 URL
【发布时间】：2016-09-05 13:51:50
【问题描述】：

我有一个网页，上面有一些标签。选项卡的链接如下所示：

<a class="tab active" href="#" data-tab="1">Some link text</a>
<a class="tab active" href="#" data-tab="2">Some link text</a>
<a class="tab active" href="#" data-tab="3">Some link text</a>

当页面加载时，所有选项卡都处于活动状态（css 方式）- 我知道 :)

标签代码如下所示：

<div class="tab-content active" data-tab="1">
    Content of the tab
</div>
<div class="content" data-tab="2">
    Content of the tab
</div>
<div class="content" data-tab="3">
    Content of the tab
</div>

当我在页面上使用它时，它工作得很好。但是，如果我想链接到那个特定的页面，但我想从标签号 1 开始呢？

我意识到，如果我有 id="1"，我可能只是在 url 中添加一个 #1，但这不是此代码的选项。

谁能帮忙？谢谢。

【问题讨论】：

你所问的叫做 deep-linking foundation.zurb.com/forum/posts/….
嗨@evolutionxbox，我刚刚发布了一条新评论——你能帮我进一步吗？我发现了如何将#hash 放到地址行，但我不太确定如何继续。

标签： javascript jquery tabs

【解决方案1】：

感谢您的回复。 JQuery 不是我的强项。

我找到了以下代码，它触发了脚本：

$('body.player').find('tab').click(function(){
            var self = this;
            $('.playerLoaders').addClass('loading');
            $('.tab-content[data-tab="' + $(self).attr('data-tab') + '"]').siblings().removeClass('active');

            setTimeout(function() {

                    $('.loading-content').removeClass('loading');
                    $('.tab-content[data-tab="' + $(self).attr('data-tab') + '"]').addClass('active').siblings().removeClass('active');
                    $(self).addClass('active').siblings().removeClass('active');


            },1500);
        });

【讨论】：