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

pre $ $（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： Click me！

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!