Underline transition in menu

问题

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.

回答1:

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!

回答2:

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.

来源：https://stackoverflow.com/questions/16522835/underline-transition-in-menu