Изменение ListItem css на активной странице

Question

Я пробовал несколько способов сделать это, и ни один из них, похоже, не работает для меня.

У меня есть довольно простое меню в верхней части моей страницы со ссылками, которые по умолчанию имеют размер шрифта обычного и серого цвета, а при наведении на них цвет становится жирным и белым. Это прекрасно работает, но я хочу, чтобы пункт меню текущей страницы был жирным и белым. например Если я на главной странице, я хочу, чтобы домашняя ссылка была жирным и белым, в то время как остальные серым и нормальным, и если я перехожу на страницу «О программе», ссылка «О» становится жирным и белым, в то время как остальные серым и нормальным .

В настоящее время у меня есть это:

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>. Я бы ожидал, что это сработает, поэтому может показаться, что атрибут class не установлен должным образом для <li>.

У кого-нибудь есть идеи, почему это не работает? Или на самом деле другим способом, который может достичь того, что мне нужно?

Большое спасибо

EDIT:

Вот оставшийся 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;
}

Я также внес небольшое изменение в оригинальный код, чтобы не использовать блок else для установки isNotSelected, и просто добавил это к ul.headerMenu li a

Answer 1

Попробуйте это в сочетании с вашим JavaScript, который добавляет класс.

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

Answer 2

Стили для ссылки, вероятно, переопределяют стили, которые применяются классом.Попробуйте вместо этого

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

И IsNotSelected не требуется, так как это будет стиль по умолчанию.