jquery添加一個類菜單項？

我有以下的菜單項：jquery添加一個類菜單項？

<ul> 
    <li class="static"> 
     <a class="static menu-item" href="/mySites/AboutUs">About Us</a> 
    </li> 
    <li class="static"> 
     <a class="static-menu-item" href="/mySite/Practices">Practices</a> 
    </li> 
    <li class="static"> 
     <a class="static-meunu-item" href="/mySite/Sectors">Sectors</a> 
    </li> 
</ul>

我不能具體的背景圖像添加到菜單項，因爲它們都具有相同的類。爲了實現這一點，將是理想的，如果specic類例如可以添加：

<ul> 
    <li class="static"> 
     <a class="static menu-item about-us" href="/mySites/AboutUs">About Us</a> 
    </li> 
    <li class="static"> 
     <a class="static-menu-item practices" href="/mySite/Practices">Practices</a> 
    </li> 
    <li class="static"> 
     <a class="static-meunu-item sectors" href="/mySite/Sectors">Sectors</a> 
    </li> 
</ul>

在以紅色突出顯示在上面的例子是已經添加的類。這將允許我將特定的背景圖像添加到每個菜單項。

如何在jqery中使用.addClass（）方法實現此目的？

任何援助將大大受到讚賞。

預先感謝

來源

2011-11-24 Dev P

你真的需要添加運行時類？我想通過服務器代碼或html模板文件添加它們會更好。 – ikromm

他們並不都具有相同的班級，一個是「靜態菜單項目」，一個是「靜態菜單項目」，一個是「靜態菜單項目」... –

對不起，這是一個錯字，他們都有相同的類「靜態菜單項」。我想避免重新構建sharepoint2010菜單，所以我認爲這將是將特定背景圖像添加到特定菜單項的更好方法。 –

我個人覺得它用Javascript來做這樣的事情有點矯枉過正。在上面提到的做服務器端更有意義。或... CSS！你可以使用CSS3僞類來做到這一點。我已經創建了一個example here

要在舊的瀏覽器如IE7這項工作，請確保您添加Selectivizr您head部分

來源

2011-11-24 15:47:39 peduarte

我已經這樣做了，但出於某種原因，相同的背景圖像適用於所有項目，換句話說，它沒有正確區分它們。 –

這很奇怪，我的例子工作得很好。你在找什麼瀏覽器？將有助於看到一個生動的例子:) - 順便說一句，爲什麼-1？ – peduarte

在這種情況下，將特定的類是矯枉過正。因爲這似乎是你在什麼基礎斷你的班，我只想用一個href選擇：

// *= indicates contains 
$('a[href*="AboutUs"]').addClass("about-us"); 
$('a[href*="Practices"]').addClass("practices"); 
$('a[href*="Sectors"]').addClass("sectors");

如果在頁面上的其他美女主播與同HREF的，你不希望包括，簡單地使用父>子選擇：

// *= indicates contains 
$('.static > a[href*="AboutUs"]').addClass("about-us"); 
$('.static > a[href*="Practices"]').addClass("practices"); 
$('.static > a[href*="Sectors"]').addClass("sectors");

這裏是a working jsFiddle來說明的解決方案。

來源

2011-11-24 15:08:38

更正：* =並不意味着'開始於'，^ =意味着'開始於'，$ =意味着'結束於'，* =意味着'包含' – Sander

@桑德，你是對的！我知道這一點（這就是爲什麼我使用了那個），但我輸入''從'開始'看我是否可以讓自己看起來很傻。我認爲它工作:) –

歡迎一點點的高度！ –

您應該能夠傳遞一個回調函數的addClass功能添加類 -

$("a").addClass(function() { 
    var newclassname = $(this).text().toLowerCase(); 
    return newclassname.replace(/ /g,'-'); 
})

演示 - http://jsfiddle.net/aZEZN/

來源

2011-11-24 15:08:49 ipr101

感謝您的幫助。非常感謝！ –

這樣定義你的類;

.highlight { background:yellow; } 
.highlight2 { background:yellow; } 
.highlight3 { background:yellow; }

然後像這樣添加你的班級;

$(".about-us").addClass("highlight"); 
$(".practices").addClass("highlight2"); 
$(".sector").addClass("highlight3");

來源

2011-11-24 15:10:55 erimerturk

感謝您的幫助。不勝感激！ –

這不一定是矯枉過正，爲每個列表項指定單獨的類。當甚至有可能將多個元素組合在一起（用於腳本，樣式）時，應該使用類（與ID相對）。就你而言，因爲這是一個導航菜單，所以你可能有多個菜單（例如左側窗格邊欄，頁腳菜單等等）。根據我的經驗，我將每個菜單按鈕指定爲自己的類別，以便處理一組鏈接（即將用戶引導至關於我們頁面的所有鏈接）。

這樣做的最明顯的好處是您可以將活動鏈接作爲一個組來處理，也可以單獨處理;就像您在這些鏈接上使用懸停顏色一樣，您也可能希望鏈接在用戶處於特定頁面時變爲粗體。如果您有多個菜單，將這些鏈接分組在一起並將其作爲一個類來處理將允許您加粗所有鏈接。

爲了補充說明，erimerturk有一個很好的想法，可以在你的風格中指定高光或「主題」。當您想要爲您的網站指定某種顏色方案時，這是一種很好的做法（儘管不適合您的情況）。指定您的顏色，背景顏色和高亮作爲類，並將這些類標記爲直接在html中所需的元素。這對於可維護性和可擴展性來說是一個巨大的提升，儘管我並不是說這是一種好的做法，但就我而言，這絕對不是壞習慣。

來源

2011-11-24 15:39:31 Prusprus

謝謝，非常感謝 –

矯枉過正與否，有時候我們可能只是想測試一下的想法很快就瀏覽器，或者您可能正在使用nodejs。我已將鏈接類編輯爲static-menu-item。

var links = $("body").find("a.static-menu-item"); 
$.each(links, function(value) { 
    var items = $(this).attr('href').split("/"); 
    $(this).addClass(items[items.length-1].toLowerCase()); 
});

Working example

來源

2013-12-17 06:15:32

jquery添加一個類菜單項？

回答

相關問題