jquery - jQuery活动菜单链接到索引页面始终处于活动状态

jquery - jQuery活动菜单链接到索引页面始终处于活动状态,第1张

我有一个菜单,它使用以下jQuery来添加活动类以突出显示当前页面。

<script>
    jQuery(document).ready(function($) {
        $(function() {
            setNavigation();
        });

        function setNavigation() {
            var path = window.location.pathname;
            path = path.replace(/\/$/, "");
            path = decodeURIComponent(path);

            $(".nav a").each(function() {
                var href = $(this).attr('href');
                if (path.substring(0, href.length) === href) {
                    $(this).closest('li').addClass('active');
                }
            });
        }
    });
</script>

这是我的HTML:

<ul class="nav">
    <li><a href="/wordpress">Portfolio One</a></li>
    <li><a href="/wordpress/portfolio-two">Portfolio Two</a></li>
    <li><a href="/wordpress/portfolio-three">Portfolio Three</a></li>
    <li><a href="/wordpress/bio-contact">Bio / Contact</a></li>
</ul>

如您所见,第一个链接(Portfolio One)链接到主页面。这导致此链接始终激活类,无论菜单位于何处。

任何人都可以提供一些修改我的jQuery的知识,以便它获得完整的链接,并且只排除部分匹配吗?

最佳答案:

2 个答案:

答案 0 :(得分:1)

菜单中的链接始终具有活动类的原因是因为非活动链接未将其删除。 您可以尝试添加$('.nav li').removeClass('active');这将首先删除active类,然后您可以为当前活动链接添加活动类。

这是更新后的代码。

function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);

    $(".nav a").each(function() {
        $('.nav li').removeClass('active'); // remove active for all links
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
        }
    });
}

答案 1 :(得分:0)

如何在添加类

之前在if-construct中包含其他条件

if (path.substring(0, href.length) === href && path.length == href.length)

DABAN RP主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
U19学习网站 » jquery - jQuery活动菜单链接到索引页面始终处于活动状态