與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>標籤

回答

相關問題