Question

我创建了一个导航标题，并且当用户位于该页面上时，我希望导航标题（例如博客）中的文本变为亮绿色。

在下面的第二张照片链接中，查看“与我联系”部分。

The result I want my nav header to look like.

这是我的menu.json文件代码：

sudo env foo="$foo" bar="$bar" ./build/unit-tests

menu.scss文件的代码：

[
    {
        "link": "/",
        "title": "Coder In Pink",
        "label": "Home"
    },
    {
        "link": "/about",
        "title": "About Me",
        "label": "About Me"
    },
    {
        "link": "/blog",
        "title": "Blog",
        "label": "Blog"
    },
    {
        "link": "/contact",
        "title": "Contact",
        "label": "Contact"
    }
]

menu.pug文件：

.menu__list {
    text-align: center;
}

.menu__item {
    display: inline;
}

.menu__link {
    padding: 0 30px;

    &:active {
        color: #00ffbd;
    }
}

感谢您的帮助！

Answer 1

如果要使用jQuery，这可能是一个简单的解决方案，可以使用“活动”类将具有匹配href值的链接标记为当前路径名。

$(function(){
    var currentPath = location.pathname;
    $('.menu__list .menu__link').each(function(){
        var $this = $(this);
        // if the current path is found in the href make it active
        if($this.attr('href').indexOf(currentPath) !== -1){
            $this.addClass('active');
        }
    })
})

然后设置活动类的样式。

.menu__link.active {
    color: paleturquoise;
}

用户在页面上时如何更改导航标题中的文本颜色

1 个答案: