跨不同页面保持选项卡活动类

Question

我找不到似乎不是指一个页面中的标签而不是跨多个页面的答案，所以......我们在这里！

我有这段代码出现在几个页面中，代表一个标签效果：

<ul id="teams-tabs" class="content-tabs-main group">
    <li><a href="http://localhost/first-team/">1st team<span></span></a></li>
    <li><a href="http://localhost/reserves/">Reserves<span></span></a></li>
</ul>

当用户访问例如第一队主页或第一队的子页面时，使用以下代码将第一队标签设置为活动状态：

$(document).ready(function(){
    var current_url = window.location.href;     
    $(".content-tabs-main li a").each(function(){
        var main_tab_href = $(this).attr("href");
        if (current_url.indexOf(main_tab_href) > -1) {
            $(this).parent().addClass("active-main-tab");
        }
    });
});

这一切都很好，但是每次重新加载页面或访问 first team 的子页面时都会刷新 html，因此每次活动状态都会闪烁，然后再次打开，这有点烦人。

如果页面需要，有没有人可以在不先切换回默认“关闭”状态的情况下保留活动状态的解决方案？

谢谢，

迈克

Answer 1

最简单的方法是简单地将页面的当前 URL 与 <a> 元素的 href 进行比较；如果它们相同，那么这就是您所在的页面：

$('a').filter(function(){
    // note that we're using the 'href' property, not the attribute, to
    // get an absolute URL rather than a, potentially, relative URL (this
    // is why we're using filter() rather than an attribute selector)
    return this.href === window.location;
}).closest('li').addClass('active-main-tab');

或者，如果您的 HTML 类似于：

<ul>
    <li><a href="http://example.com/first-team">First Team</a>
        <ul>
            <li><a href="#captain">Captain</a></li>
            <li><a href="#striker">Striker</a></li>
        </ul>
    </li>
</ul>

并且，在链接到#captain 之后，您希望#captain 和 first-team <li> 元素都处于活动状态：

$('a').filter(function(){
    return this.hash === window.location.hash || this.href === window.location;
}).closest('li').addClass('active-main-tab');