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");
        }
    });
});

这一切都运行得很好，但是每次重新加载页面或者访问第一个团队的子页面时都会刷新html，每次活动状态都会重新打开和重新打开，这有点烦人。

是否有人有一个解决方案可以保留活动状态，而无需先切换回默认状态＆＃34; off＆＃34;如果页面需要它，请说明什么？

谢谢，

麦克

Answer 1

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

$('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');

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

1 个答案: