css - 菜单中的下划线过渡

Question

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

单击链接时，下划线会在链接之间滑动。在这里尝试一个 jsfiddle 。

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

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

Answer 1

You can actually do this with pure css using The :target pseudo class.

Here is an updated working fiddle

Note: You'll need a modern browser to use this method. (IE9+)

Also, take a look at this article which shows some clever ways to simulate click events with css (one of them being the :target pseudo class.

Answer 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 中看到：点击我！