菜单中的下划线转换

Question

我有一个带下划线的熔岩灯的菜单，如下所示：

点击链接时，下划线会在链接之间滑动。试试jsfiddle HERE。

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

我已经尝试了:visited但它没有做任何事情。

Answer 1

你可以使用:target伪类来实现纯css。

以下是更新的 working fiddle

注意：您需要使用现代浏览器才能使用此方法。 （IE9 +）

另外，看看this article，它显示了一些用css模拟点击事件的聪明方法（其中一个是：target伪类。

Answer 2

你可以通过CSS做到这一点，我真的不知道。 但是你为什么不直接使用这三行JS（jQuery）并用这个替换Style-definition：

$('.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> */
}

在这个jsFiddle中看到：Click me!