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

:visited无法使用javascript工作。这是一个安全问题，使用它可能会记录用户的历史记录。

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

Answer 2

来自@esviko的答案，但添加了一些更新

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

Answer 3

你的问题有点暧昧但仍然......

如果您想特别装饰您访问过的菜单链接，那么您应该将其添加到您的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');
});

链接：访问不工作

4 个答案: