与jQuery或Javascript类添加到<a>标签

我有以下标记：与jQuery或Javascript类添加到<a>标签

<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>项目。任何想法都表示赞赏。

来源

2012-04-27 antigaprime

一个非常简单的方法，虽然没有效率的保证。 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（），只是一个额外的步骤。

来源

2012-04-27 18:06:19 KBN

你可能想的.text（）不.HTML（）记错 – 2012-04-27 18:09:36

嗨，马克，这两个文本（）和HTML（）将正常工作。 – KBN 2012-04-27 18:10:39

你也可以做'document.title'，不知道它是否有更快的速度:-P – 2012-04-27 18:18:00

尝试这样的事情（你可能需要从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

来源

2012-04-27 18:06:36

第一个像魅力一样工作。第二个，即使使用“location.href”，也只分配了类“none”，而不是“selected”，但非常感谢！ – antigaprime 2012-04-27 20:31:18

@ antigaprime：不客气。我不太确定第二个，我只是把它扔在那里。 :-P – 2012-04-27 20:32:59

只需将ID属性添加到你的 “一个标签”，并使用jQuery做：

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

来源

2012-04-27 18:06:50

与jQuery或Javascript类添加到<a>标签

回答

相关问题