CSS - 선택한 탭 강조 표시

Question

마스터 페이지에 다음 탭 탐색 설정이 있습니다.

 <nav class="grid_12"> 
      <ul> 
       <li><a href="#" class="selected">Home</a></li> 
       <li><a href="#">Portfolio</a></li> 
       <li><a href="#">Blog</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </nav> 

예를 들어 포트폴리오 탭을 클릭하면 포트폴리오 페이지에 착륙 할 때 포트폴리오 탭을 강조 표시하고 싶습니다. 이 작업을 수행하는 데 권장되는 방법은 무엇입니까?

다른 게시물을 확인했지만이 중 the most relevant은 별도의 페이지가 아닌 div에서 예제를 사용합니다.

Answer 1

"선택한"클래스 이름으로 가정하면 하이라이트에 대한 스타일이 있습니다. 사용자가 해당 링크 중 하나를 클릭하면 jquery로 클릭 된 앵커 태그에 "selected"클래스를 추가 할 수 있습니다. 이것을 닫는 body 태그 바로 앞이나 페이지의 맨 아래 또는 기본 JavaScript 파일에 넣으십시오.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".grid_12 ul li a").click(function() { 
      $(".grid_12 ul li a ").removeClass("selected"); 
      $(this).addClass("selected") 
     }) 
    }) 
</script> 

페이지가 새로 고침 나는 이런 식으로 뭔가 할 것이 새 페이지로 이동합니다 경우, 어떤 페이지 새로 고침 및 전용 콘텐츠 새로 고침이없는 경우 위의 코드에만 작동합니다 :

<nav class="grid_12"> 
    <ul> 
     <li><a href="#" class="nav_home">Home</a></li> 
     <li><a href="#" class="nav_portfolio">Portfolio</a></li> 
     <li><a href="#" class="nav_blog">Blog</a></li> 
     <li><a href="#" class="nav_contact">Contact</a></li> 
    </ul> 
</nav> 

을 특정 페이지의 스타일을 추가하십시오. 예를 들어, 당신은 만 추가 포트폴리오에 대한 CSS에서 www.mySite.com/portfolio에있을 때 :

a.nav_portfolio{ 
    background-color:orage; 
    ... 
} 

이 방법 당신은 어떤 자바 스크립트를 할 필요가 없습니다.