时间戳

首页 > 解决方案 > 当用户在页面上时如何更改导航标题中的文本颜色

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

问题描述

我制作了一个导航标题，我希望当用户在该页面上时，导航标题（例如博客）中的文本变成明亮的绿松石色。

我网站的导航标题

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

我希望我的导航标题看起来像的结果。

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

[
    {
        "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.scss 文件的代码： 

.menu__list {
    text-align: center;
}

.menu__item {
    display: inline;
}

.menu__link {
    padding: 0 30px;

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

menu.pug 文件： 

ul.menu__list
    each menu in data.menu
        li.menu__item
            a.menu__link(
                href=menu.link,
                title=menu.title
            )=menu.label

谢谢你的帮助！

标签： csssasspug

解决方案

如果您想使用 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;
}

推荐阅读