菜单中的下划线过渡答案

【问题标题】：Underline transition in menu菜单中的下划线过渡
【发布时间】：2013-05-13 13:06:55
【问题描述】：

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

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

我唯一的问题是，如果您在菜单外单击，下划线会恢复到原来的状态 (18%)。但是，当您在菜单外单击时，我希望下划线保留在最后一次单击的链接上。

我试过:visited，但它什么也没做。

【问题讨论】：

标签： css focus css-transitions

【解决方案1】：

您实际上可以使用 :target 伪类对纯 css 执行此操作。

这是更新的 working fiddle

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

另外，看看this article，它展示了一些用 css 模拟点击事件的巧妙方法（其中之一是 :target 伪类。

【讨论】：

我需要以 IE7+ 为目标，但这对未来的项目很有帮助！

【解决方案2】：

你也许可以通过 CSS 做到这一点，我真的不知道。但是你为什么不直接使用这 3 行 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!

【讨论】：

我用click 替换了focus，现在它也可以在Chrome 中使用。也许你可以用这个更新你的答案。
这是做什么的：$('.ph-line-nav a').removeClass('active');行吗？
请阅读官方文档：api.jquery.com/removeclass。这是基本的 jQuery :)