현재 페이지 메뉴 리 하이라이트

페이지 ID에 따라 메뉴 li을 강조 표시 할 수있는 방법이 있습니까? 나는 그것을 할 수있는 방법을 찾아 낼 수가 없다.현재 페이지 메뉴 리 하이라이트

http://www.dawaf.co.uk/cthm/work/

<div id="header"> 
    <h1> 
     <a href="http://www.dawaf.co.uk/cthm/work"> 
      <img src="http://www.dawaf.co.uk/cthm/wp-content/uploads/2013/01/logo2.png" alt="CTHM Logo" id="logo" width="140" height="44" />  
     </a> 
     <div id="contact-details"> 
      26 Queen Anne Road, London, E9 7AH<br /> 
      t + 44 7912325101<br /> 
      <a href="mailto:[email protected]">[email protected]</a> 
     </div> 
    </h1> 
    <div id="nav"> 
     <span id="nav-li"> 
      <a href="http://www.dawaf.co.uk/cthm/work/" class="work-current">Work</a> 
      <a href="http://www.dawaf.co.uk/cthm/studio/" class="studio-current">Studio</a> 
      <a href="http://cthmplus.tumblr.com/" target="_blank">CTHM&#43;</a> 
      <a href="https://twitter.com/hello_cthm" target="_blank"> 
       <img src="http://www.dawaf.co.uk/cthm/wp-content/uploads/2013/01/twitter.png" alt="Twitter" width="13" height="13"> 
      </a> 
     </span> 
    </div> 
</div> 

<div id="content">

출처

2013-01-24 user1652997

먼저 표시되는 앵커에 대해 "activepage"클래스를 지정해야합니다. 그런 다음'.activepage {color : green;} '와 같은 스타일을 지정할 수 있습니다. – Omega

나는 탐색 항목 활성 클래스를 추가하는 것이 좋습니다 것입니다. 이런 식으로 뭔가 :

<a href="http://www.dawaf.co.uk/cthm/work/" class="active">Work</a>

그리고 다음 CSS :

#nav a.active { 
    /* your active style here */ 
}

출처

2013-01-24 00:32:03 zakangelle

어떻게하면 '직장'과 '스튜디오'페이지가 활성 상태인지 구분할 수 있습니까? 페이지 ID를 사용해야합니까? – user1652997

페이지를 만들 때 서버 측에 활성 클래스를 추가하는 것이 가장 이상적입니다. 이것이 옵션이 아니라면, 다음과 같이 jQuery로 할 수있다 : $ ("# nav"). find ("a [href = '"+ window.location.href + "']"). addClass ("active"); – zakangelle

당신은 두 가지 옵션이 있습니다. 하나는 Zak이 언급 한 것으로, 웹 사이트에 대해 jQuery를 사용하여 한 번에 하나의 항목 만 "활성"으로 표시해야합니다. 다른 옵션은 현재 사용중인 링크에 CSS를 자동 적용하는 CSS : 활성 선택기입니다. 예 :

#nav li a:active { 
    /* Insert styling here, such as, background-color: #01B */ 
}

이 정보가 도움이되는지 알려주세요.

출처

2013-01-24 01:14:29

현재 페이지 메뉴 리 하이라이트

답변

관련 문제