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

Answer 2

一种非常简单的方法，但不保证效率。 HTML：

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

使用Javascript：

$(document).ready(function() {
 $("#"+ $.trim( $("title").html() ) ).addClass("selected");
});

编辑：添加了$ .trim（），这只是一个额外的步骤。

Answer 3

只需将ID属性添加到“a标签”并使用jQuery do：

$("#home").addClass('selected');

使用Jquery或Javascript添加一个类到<a> tag</a>

3 个答案: