Как изменить цвет текста в заголовке Nav, когда пользователь находится на странице - PullRequest
Новая
       29

Как изменить цвет текста в заголовке Nav, когда пользователь находится на странице

0 голосов
/ 05 сентября 2018

Я сделал заголовок навигации, и я хочу, чтобы текст в заголовке навигации (например, блог) стал ярко-бирюзовым, когда пользователь находится на этой странице.

Навигационный заголовок моего сайта

Во второй ссылке на фотографию ниже, посмотрите раздел «Свяжитесь со мной».

В результате я хочу, чтобы мой заголовок навигации был похож.

Вот мой код для файла 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

Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 05 сентября 2018

Если вы хотите использовать 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;
}
...