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;} 

위의 지금 이상한 것은 내가 심지어 수동으로 예를 들면 '에 isSelected'에 <li> 클래스를 설정할 수있다, 작동하지 않습니다 <li id="home" class="isSelected"><a href="./Home.php">Home</a></li>. 이것은 제가 작업했을 것으로 기대했던 것이기 때문에 클래스 속성이 <li>에 대해 올바르게 설정되지 않은 것으로 보입니다. 이 작동하지 않는 이유

누구나 어떤 아이디어가? 또는 실제로 내가 필요한 것을 얻을 수있는 또 다른 방법은?

많은 감사

편집 : 필자는 설정 다른 블록을 사용하지 않도록 ORGINIAL 코드에 약간의 변화를 만들어

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; 
} 

:

여기

이 필요한 나머지 CSS입니다 isNotSelected 그냥 아마도 클래스에 의해 적용되고 스타일을 재정의 ul.headerMenu li a

Answer 1

클래스를 추가하는 자바 스크립트와 함께 사용해보십시오. 나는 일반적으로 오히려 페이지가로드 된 후보다, 현재 페이지의 탐색 링크 서버 측에 (당신의 "에 isSelected"와 같은)는 "활성"클래스를 설정

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에 대한 필요가 없습니다.