链接：visited not working

Question

我在li上有一堂课，名为current-page。我希望这个班级移动到每个li，并在访问时从上一个移除。

<div class="nav-collapse collapse"> 
    <ul class="nav pull-right"> 
     <li class="current-page"> 
      <a href="/">Home</a> 
     </li> 
     <li> 
      <a href="/Pages/StaticPage?pagePath=About%20Us">About Us</a> 
     </li> 
     <li> 
      <a href="/Pages/StaticPage?pagePath=Investors">Investors</a> 
     </li> 
     <li> 
      <a href="/Pages/ContantPage?pageId=1">Products</a> 
     </li> 
     <li> 
      <a href="/Pages/ContantPage?pageId=2">Services</a> 
     </li> 
     <li> 
      <a href="/Pages/ContantPage?pageId=3">Quality &amp; HSE</a> 
     </li> 
     <li> 
      <a href="/Pages/PhotoGallery">Photo Gallery</a> 
     </li> 
     <li> 
      <a href="/News/News">News</a> 
     </li> 
     <li> 
      <a href="/Pages/StaticPage?pagePath=Contact%20Us">Contact Us</a> 
     </li> 
    </ul> 
</div> 

我尝试的CSS不是工作太

.header ul.nav li a:active 
{ 
    background-color: #EEEEEE !important; 
    text-decoration: none !important; 
} 

，这太不正常工作

.header ul.nav li a:visited 
{ 
    background-color: #EEEEEE !important; 
    text-decoration: none !important; 
} 

Answer 1

从@esviko答案，但一些更新添加

 $('.nav li').unbind('click').click(function(){ 
      $(this).siblings().removeClass('current-page'); 
      $(this).addClass('current-page'); 
      return false; 
    }); 

Answer 2

:visited不使用JavaScript工作。这是一个安全问题，使用它有可能记录用户的历史记录。

至于你的CSS问题，你没有任何元素与header类。

Answer 3

你的问题是有点ambigous但仍...

如果你想装饰你访问过的菜单链接专门那么你应该添加到您的CSS：

.nav a:visited{ 
    /* your style goes here */  
} 

如果你想添加一些特殊的类访问链接，然后由于安全原因，这不可能通过JavaScript。

如果您只想将一个类添加到您当前正在使用的页面上，则需要关于您的页面的其他信息，以了解页面现在在哪个菜单项下（URL模式，某种请求参数或其他类型）其他...）。

Answer 4

试试这个：http://jsfiddle.net/Eq8TL/

$('.nav li').click(function(){ 
    $(this).siblings().removeClass('current-page'); 
    $(this).addClass('current-page'); 
});