菜单中的下划线转换

问题描述

我有一个像下划线这样的熔岩灯的菜单：

点击链接时，下划线在链接之间滑动。尝试一个jsfiddle 。

我唯一的问题如果您在菜单外单击，则下划线将恢复到原始状态（18％）。但是我希望下划线留在最后点击的链接，当你点击菜单外。

我试过：visited 但是它什么也没做。

解决方案

你也许可以通过CSS来做到这一点，不知道。
但是，为什么不使用这三行JS（jQuery），并用下面的代码来替换Style-definition：

pre $ <$ c $（'。ph-line-nav a'）。removeClass（'active'）$（'。ph-line-nav'）。 '）;
$（this）.addClass（'active'）;
}）;

nav a：nth-​​child（1）.active〜.effect {
left：18％;
/ *第一个< a>的中间* /
}
nav a：nth-​​child（2）.active〜.effect {
left：43.5％;
/ *第二个中间< a> * /
}

看到这个jsFiddle：

I have a menu with a lava-lamp like underline that looks like this:

The underline slides between links when clicking on them. Try a jsfiddle HERE.

My only problem is that if you click outside the menu the underline reverts back to it's original state (18%). But I want the underline to stay on the last clicked link when you click outside the menu.

I've tried :visited but it doesn't do anything.

解决方案

You may be able to do this through CSS, I really don't know.But why don't you just use these 3 lines of JS (jQuery) and replace the Style-definition by this:

$('.ph-line-nav').on('click', 'a', function() {
    $('.ph-line-nav a').removeClass('active');
    $(this).addClass('active');
});

nav a:nth-child(1).active ~ .effect {
    left: 18%;
    /* the middle of the first <a> */
}
nav a:nth-child(2).active ~ .effect {
    left: 43.5%;
    /* the middle of the second <a> */
}

Seen in this jsFiddle: Click me!

这篇关于菜单中的下划线转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！