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（）{”给出错误“$不是函数”的问题，所以我删除了{{1一切正常。精炼jquery：

jQuery.noConflict();

使用特定于页面的URL和addClass到href的Sprite的活动导航

1 个答案: