Question

我有一个菜单，它使用以下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的知识，以便它获得完整的链接，并且只排除部分匹配吗？

Answer 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');
        }
    });
}

Answer 2

如何在添加类

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

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

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

2 个答案: