添加一个带有Jquery或Javascript的类到<a>标签

Question

我有以下标记:

<ul class="menubar">
    <li><a href="home.php" title="Home">Home</a></li>
    <li><a href="services.php" title="Services">Services</a></li>
    <li><a href="aboutus.php" title="About Us">About Us</a></li>
    <li><a href="contact.php" title="Contact Us">Contact Us</a></li>
</ul>

我需要帮助找出如何根据活动页面使用Jquery或Javascript(最好是Jquery)添加类.例如,在"Home.php"页面上,我想将类".selected"添加到活动<a>标记中,同时将类".none"添加到所有其他链接.

因此,当在"home.php"页面上时,代码应如下所示:

<ul class="menubar">
    <li><a href="home.php" class="selected" title="Home">Home</a></li>
    <li><a href="services.php" class="none" title="Services">Services</a></li>
    <li><a href="aboutus.php" class="none" title="About Us">About Us</a></li>
    <li><a href="contact.php" class="none" title="Contact Us">Contact Us</a></li>
</ul>

根据其余代码的工作方式,我需要将类分配给<a>标记而不是整个<li>项目.任何想法都表示赞赏.

Answer 1

尝试这样的事情(你可能需要使用不同的属性location,比如href或pathname,但你明白了):

$('ul.menubar a').each(function(){
    if(location.href === this.href){
        $(this).addClass('selected');
        $('ul.menubar a').not(this).addClass('none');
        return false;
    }
});

或者更好的是:

$('ul.menubar a').addClass('none').filter('a[href="'+location.pathname+'"]')
    .removeClass('none').addClass('selected');

以下是有关该location对象的更多信息:https://developer.mozilla.org/en/DOM/window.location