標記在導航欄中顯示當前頁面

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的鏈接/ Javascript

jQuery的解決方案：

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