jquery - 在该页面上更改一个链接的 CSS 背景颜色

Question

嘿，我只是想仅在用户位于该链接所对应的特定页面上时，才将我的 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");
}

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

Answer 1

试试这个:

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

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

您还可以向该 li 添加一个类:

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

无论如何，看起来您的选择器应该是:

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