탐색 표시 줄에 현재 페이지를 표시하는 표시 자

Question

사이트의 사용자 탐색을 지원하는 솔루션을 개발 중입니다. 현재 내 탐색 바 아래에 사용자가있는 사이트의 현재 섹션에 대한 전체 경로를 보여주는 탐색 경로 탐색 메뉴가 있습니다.

이제 스크립트를 만들거나 CSS 규칙을 사용하여 내비게이션 막대의 탭 아래에 마커를 표시하여 사용자가있는 섹션을 표시하려고합니다. 누군가이 문제를 해결하는 데 사용할 수있는 일반적인 방법에 대해 조언 해 주시겠습니까?

작은 .png를 각 탭 아래에 표시하려는 화살표 표식으로 사용하고 있습니다. 이처럼

Answer 1

: DEMO

HTML :

<ul> 
    <li><a href="#">Home</a></li> 
    <li class="active"><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
</ul>​ 

CSS :

.active { 
     background:#ccc url(path/to/image/marker.png) center bottom no-repeat; 
} 

당신이 jQuery를 같은 스크립트 언어를 사용할 필요가 링크를 클릭 할 마커를 전환하여/자바 스크립트

,

jQuery를 해결 :

$("ul li a").on('click', function(e){ 
    e.preventDefault(); 
    $(this).closest('li').addClass('active').siblings().removeClass('active') 
});​