Jquery活動菜單熒光筆

我正在製作一個帶有粘性導航的單頁網站。我想要的是當選擇菜單被點擊時，活動鏈接以不同的顏色突出顯示。這是我的jQuery腳本：Jquery活動菜單熒光筆

$(document).ready(function() { 
    var pathname = (window.location.pathname.match(/[^\/]+$/)[0]); 
    $("#main-menuid li a").removeClass("current"); 
    $("#main-menuid li a[href='" + pathname + "']").addClass("current"); 
});

我的導航HTML：

<div id="main-menuid"> 
<ul> 
<li class="homnav"><a href="#home">Home</a></li> 
<li class="abonav"><a href="#about">About</a></li> 
<li class="mennav"><a href="#menu">Menu</a></li> 
<li class="connav"><a href="#contact">Contact</a></li> 
</ul> 
</div>

而且我上課.current CSS：

.current { 
    color: #F05454; 
}

非常感謝。

來源

2011-10-08 jmc

它不工作，我錯過了什麼？ – jmc

在你的'pathname'變量上嘗試'alert'或'console.log' - 你得到了什麼值？ – ipr101

按照ipr101的建議查看獲取正確的路徑名。或者只是使用Firebug/Dev Tools來查看是否已應用.current！有可能是班級在那裏，但CSS不起作用，因爲它沒有足夠高的特異性或某些東西。 –

你必須使用window.location.hash得到#parameter

用下面的代碼試試。

var pathname = window.location.hash; 
    $("#main-menuid li a").removeClass("current"); 
    $("#main-menuid li a[href='" + pathname + "']").addClass("current"); 

      jQuery("#main-menuid a").click(function(){ 
       $("#main-menuid li a").removeClass("current"); 
       $(this).addClass("current"); 
      }) 

});

來源

2011-10-08 08:53:29 Amila

這隻有在每個頁面都用散列指定時纔有效。 –

由於它是哈希值，所以您可以在點擊時突出顯示。然後，只需篩選出匹配的哈希並添加類的onload（錨具有相同的屬性了window.location）：

var c = 'current'; 
$("ul a").click(function() { 
    $(this).addClass(c).parent().siblings().children('.'+c).removeClass(c); 
}).filter(function() { 
    return this.hash == location.hash; 
}).addClass(c);

http://jsfiddle.net/KL7QZ/

來源

2011-10-08 09:05:33 David

Jquery活動菜單熒光筆

回答

相關問題