jquery - 使用页面特定 URL 和 addClass 到 href 的 Sprites 主动导航

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;}

我想要的是在里面添加一个class="selected": 例子基于页面的当前 URL。

我认为这可能有效，但运气不好:

$(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 控制台中 "$(document).ready(function() {"giving error "$ is not a function" 的问题，所以我删除了我的 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');
});