活动导航使用网页指定网址，addClass到HREF

Question

我试图让自主导航系统使用javascript/jQuery的用下面的设置工作精灵：

<div id="Header"> 
    <div id="logo"><a href="/" title="Home"><img src="logo.png" border="0"></a></div> 
    <div id="nav"> 
    <ul id="menu"> 
    <li id="home"><a href="/" title="Home"><span class="displace">Home</span></a></li> 
    <li id="galleries"><a href="/galleries" title="Galleries"><span class="displace">Galleries</span></a></li> 
    <li id="clients"><a href="/clients" title="Clients"><span class="displace">Clients</span></a></li> 
    <li id="now"><a href="/now" title="Now"><span class="displace">Now</span></a></li> 
    <li id="contact"><a href="/contacts" title="Contact"><span class="displace">Contact</span></a></li> 
    </ul> 
    </div> 
    </div> 

的CSS工作正常：

#Header{width:100%, clear:both;} 
#logo{float:left;width:173px; height:80px;} 
#nav{float:right;width:408px; height:80px;} 
/* Setup */ 
#menu { padding: 0px; margin:0px; width:408px; height:80px;} 
.displace {position: absolute;left: -5000px;} 
ul#menu {list-style: none;padding: 0px;} 
ul#menu li {float: left;} 
ul#menu li a {display: block;height: 80px;background: url('http://www.url.com/images/sprite.png') no-repeat;} 
/* Normal Links */ 
ul#menu li#home a {width: 75px; background-position: 0 0;} 
ul#menu li#galleries a {width: 103px;background-position: -75px 0;} 
ul#menu li#clients a {width: 82px;background-position: -178px 0;} 
ul#menu li#now a {width: 60px;background-position: -260px 0;} 
ul#menu li#contact a {width: 88px;background-position: -320px 0;} 
/* Hover Links */ 
ul#menu li#home a:hover {background-position: 0 -80px;} 
ul#menu li#galleries a:hover {background-position: -75px -80px;} 
ul#menu li#clients a:hover {background-position: -178px -80px;} 
ul#menu li#now a:hover {background-position: -260px -80px;} 
ul#menu li#contact a:hover {background-position: -320px -80px;} 
/* Clicked Links */ 
ul#menu li#home a:active {background-position: 0 -160px;} 
ul#menu li#galleries a:active {background-position: -75px -160px;} 
ul#menu li#clients a:active {background-position: -178px -160px;} 
ul#menu li#now a:active {background-position: -260px -160px;} 
ul#menu li#contact a:active {background-position: -320px -160px;} 
/* Selected/Active Links */ 
ul#menu li#home a:selected {background-position: 0 -240px;} 
ul#menu li#galleries a:selected {background-position: -75px -240px;}  
ul#menu li#clients a:selected {background-position: -178px -240px;} 
ul#menu li#now a:selected {background-position: -260px -240px;} 
ul#menu li#contact a:selected {background-position: -320px -240px;} 

我想要的是基于页面的当前URL在 示例 中添加class =“selected”。

我想这可能工作，但没有运气：

$(document).ready(function() { 

    var loc_href = window.location.pathname; 
    $('#menu a').each(function() { 
     if (loc_href == $(this).attr('href')) { 
      $(this).addClass('selected'); 
     } 
    }); 
}); 

任何想法？

Answer 1

整理出这是“$（文件）。就绪（函数（）{”给错误“$不是一个函数”在Firebug控制台，所以我删除我的jQuery.noConflict();和所有工作。 问题精制jquery到：

$(document).ready(function() { 
    if(location.pathname != "/") { 
    $('#menu a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('selected'); 
    } else $('#menu a:eq(0)').addClass('selected'); 
});