Как сделать статичным эффект при наведении на пункт в меню?

Question

[martuwka]

Здравствуйте! Есть пункты меню и эффект при наведении на каждый пункт этого меню - https://jsfiddle.net/f3weqd8o/. Эффект реализован на чистом CSS с использованием псевдокласса after. Как можно, используя jQuery или JS сделать этот эффект статичным на текущем пункте меню. Т.е. если посетитель нажал на "Новости", то нужно, чтобы этот эффект оставался, а не пропадал.

Есть код jQuery, который добавляет текущему пункту меню класс active:

$(function () {
    $('.menu a').each(function () {
        var location = window.location.href;
        var link = this.href;
        if(location == link) {
            $(this).addClass('active');
        }
        
        $(this).click(function() {
            $('.menu .active').removeClass('active');
            $(this).addClass('active');            
        });
    });
});

Игрался с этим active-ом около двух часов, искал еще час решение в Интернете, но так и не нашел. Пробовал добавлять к классу active - border-bottom, но линия добавлялась ниже той, которая при выводится при наведении и вообще не то.

Как можно решить этот вопрос?

Answer 1

[monochromer]

В примере нет стилей для класса active

.anim-middleout:hover:after,
.anim-middleout.active:after {
		width: 100%;
}

Comments

[martuwka]

Спасибо! Столько времени просто зря убил.

Answer 2

[Антон Спирин]

Так https://jsfiddle.net/v6et1xpe/

Answer 3

[Stalker_RED]

https://jsfiddle.net/7qxaepxz/

$('.menu').on('click', 'a', function() {
  $(this).closest('.menu').find('a').removeClass('active')
  $(this).addClass('active')
});

И у вас в css класс active вообще отсутствовал.