ListItem css在活動頁面上更改

我嘗試了幾種方法來完成此操作，但似乎沒有一種方法適用於我。ListItem css在活動頁面上更改

我有一個相當簡單的菜單，在我的頁面頂部有一些鏈接，默認情況下，正常和灰色的字體重量，並懸停在它們上方，將它們變成粗體和白色。這工作正常，但我想要的是爲當前頁面菜單項大膽和白色。例如如果我在主頁上，我希望Home Link爲粗體而白色，而其他則爲灰色且正常，如果我轉到About頁面，則About Link爲粗體而白色，而其他則爲灰色且正常。

目前我有這樣的：

HTML：

<ul id="menuListItems" class="headerMenu"> 
     <li id="home"><a href="./Home.php">Home</a></li> 
     <li id="about"><a href="./About.php">About Me</a></li> 
     <li id="services"><a href="./Services.php">Services</a></li> 
     <li id="gallery"><a href="./Gallery.php">Gallery</a></li> 
     <li id="contact"><a href="./Contact.php">Contact Me</a></li> 
</ul>

的 'headerMenu' 類只是樣式列表。

JQuery的：

$(document).ready(function() { 
    $("#menuListItems li").each(function() {    
     if (document.URL.toUpperCase().indexOf($(this).attr('id').toUpperCase()) > -1) 
     { 
      $(this).addClass("isSelected"); 
     } 
    }); 
});

CSS：

.isSelected a { font-weight: bold; color:white;}

以上不工作，現在奇怪的是，我不能<li>類甚至手動設置爲 'isSelected' 例如<li id="home" class="isSelected"><a href="./Home.php">Home</a></li>。這是我預計會有效的工作，所以似乎沒有爲<li>正確設置類屬性。

任何人有任何想法，爲什麼這是行不通的？或者事實上，另一種方式可以實現我所需要的？

非常感謝

編輯：

這裏是所需的其餘CSS：

ul.headerMenu { 
    list-style:none; /* remove bullets */ 
    padding-left: 50px; 
    width: 630px; 
    top: 303px; 
    position: absolute; 
} 

ul.headerMenu li a { 
    padding:10px 20px; 
    text-decoration:none; 
    float:left; 
    font: 15px "Trebuchet MS", Verdana, Helvetica, sans-serif; 
    font-weight: normal; 
    color: grey; 
} 
ul.headerMenu li a:hover 
{ 
    color:white; 
    font-weight:bold; 
}

香港專業教育學院也對orginial代碼略有變化，不使用else塊設置isNotSelected並將其添加到ul.headerMenu li a

來源

2011-12-27 Odan

我一般設置「活動」類（如您的「isSelected」），以當前頁面的導航鏈接的服務器端，而不是在頁面加載後。如果您使用PHP或其他方法，那對您而言可能更簡單。否則，我仍然建議只爲鏈接設置「isNotSelected」的默認樣式，然後只設置一個「isSelected」來覆蓋這些樣式。 – justis

你能發佈一個鏈接和/或jsfiddle和/或所有相關的CSS嗎？我猜他們是在CSS中的衝突。 –

也許這個班很早就適用了，並且正在被其他風格所抹去？ JSFiddle重新創建該問題可能會有所幫助。 – paislee

試試這個與您的JavaScript一起添加類。

ul.headerMenu li.isSelected a { 
    font-weight: bold; 
    color: white; 
}

來源

2011-12-28 03:44:19 ScottS

是的，這個工作，謝謝。 – Odan

鏈接的樣式可能會覆蓋類正在應用的樣式。試試這個代替

.isSelected a { font-weight: bold; color:white;} 
#menuListItems li a { font-weight: normal; color: grey;}

而且沒有必要IsNotSelected，因爲這將是默認樣式。

來源

2011-12-27 20:09:25

不幸的是，這也不起作用，我更新了我的代碼（和第一篇文章），以不使用isNotSelected並使用上述，但它仍然不起作用 – Odan

嗯，這不會作爲'#menuListItems李a'比'.isSelected a'具有更高的特異性。在.isSelected選擇器中包含ID和li，你應該很好。 – powerbuoy

@powerbuoy，謝謝，你也是對的，我必須添加ID和li到.isSelected才能給它更高的特異性，正如Scott也提到的那樣（我接受這個答案） – Odan

ListItem css在活動頁面上更改

回答

相關問題