0

嘿，我只想在用户位于链接所针对的特定页面上时，将我的 NAV 中链接的背景颜色更改为与所有其他导航链接不同的颜色。

代码是：

$("#nav li ul li a #changeBG1").css("background-color","red");

导航 HTML 看起来有点像这样：

<ul id="nav">
    <li><a href="index.php">home</a></li>
    <li><a href="custHelp.php">who we are</a>
    <ul>
        <li id="changeBG1"><a href="about.php">about</a></li>
        <li id="changeBG2"><a href="help.php">team</a></li>
    </ul>
</li>

然而，它似乎并没有改变那一个，它改变了所有这些。我似乎不知道如何调用NAV的 ID ，然后调用changeBG1的 ID，所以只有那个会改变。

Jquery 代码是：

var url = window.location.href;

url = url.substr(url.lastIndexOf("/") + 1);
$("#theNav").find("a[href='" + url + "']").addClass("theNavsBG");

if (url == 'about.php'){
    $("#nav li ul li a #changeBG1").css("background-color","red");
}

任何帮助都会很棒！谢谢！

4

3 回答 3

3

我会创建一个 css 类，然后使用 jquery 将该类添加到该特定链接以显示它是当前页面。

CSS

.active {
   background-color: red;
}

jQuery

var url = window.location.href;
url = url.substr(url.lastIndexOf("/") + 1);

$("#nav li ul li a").removeClass('active');
$("a[href='" + url + "']").addClass('active');
于 2012-06-04T21:51:17.563 回答
3

尝试这个：

$("#changeBG1").css("background-color","red");

id是最好的选择器，你不需要添加它“东西”。

您还可以向其中添加一个类li：

$("#changeBG1").addClass('foo');

无论如何，看起来你的选择器应该是：

$("#nav li ul li#changeBG1").css("background-color","red");
于 2012-06-04T21:40:38.397 回答
1

http://jsfiddle.net/saluce/LhbKv/1/

让自己的生活更简单...

.active{
    background-color: red;
}​

...

$("#nav a[href$='" + url + "']").addClass("active");

此代码将找到以 url 中的字符串结尾的链接（由$选择器中的 the 提供）并向该a标记添加一个类。如果要为 着色li，请使用.parent()。

$("#nav a[href$='" + url + "']").parent().addClass("active");
于 2012-06-04T22:04:24.610 回答