Javascript 使活动页面链接保持纯色背景色

我想在页面上的活动链接有一个坚实的背景颜色。我想我需要jQuery来完成这项工作。我试过这个代码，但不起作用

<script type="text/javascript">
$(document).ready(function(){
$("#navigation").each(function(){
    if($(this).attr('href') == document.URL){
        $(this).css("background-Color", "#e9fd99");
    }
});
});
</script>

$（文档）.ready（函数（）{
$（“#导航”）。每个（函数（）{
if（$（this.attr（'href'）==document.URL）{
$（this.css（“背景色”，“e9fd99”）；
}
});
});

请参见我的图片以获得澄清：

正如你所看到的——根据你在链接上的页面，会有一个稳定的BG颜色保持不变

-----------------------更新-------------------------

HTML代码：

<div id="navigation">
<div class="sb_pos">
<ul id="red" class="treeview-red">

<li class="open">
    <span class="tree_titles">About</span>
    <ul>


        <li><span><a href="?page=about_getting_started">Getting Started</a></span></li>
        <li><span><a href="?page=about_recruiting_process">Recruiting Process</a></span></li>
        <li><span><a href="?page=about_responsibility">Responsibility</a></span></li>
        <li><span><a href="?page=about_opportunity">Opportunity</a></span></li>

关于

我想你是这个意思

         $("#navigation").each(function(){

而不是这个

        $("navigation").each(function(){

如果您是按id选择，请使用#导航；如果类名为navigation，请使用.navigation

试试这个

    <script type="text/javascript">
         $(document).ready(function(){
             $(".newclass > li").each(function(){
                 if($(this).attr('href') == document.URL){
                    $(this).css("background-Color", "#e9fd99");
                 }
             });
        });
   </script>

$（文档）.ready（函数（）{
$（“.newclass>li”）。每个（函数（）{
if（$（this.attr（'href'）==document.URL）{
$（this.css（“背景色”，“e9fd99”）；
}
});
});

加上这个

     <ul class="newclass">
    <li><span><a href="?page=about_getting_started">Getting Started</a></span></li>
    <li><span><a href="?page=about_recruiting_process">Recruiting Process</a></span>   </li>
    <li><span><a href="?page=about_responsibility">Responsibility</a></span></li>
    <li><span><a href="?page=about_opportunity">Opportunity</a></span></li>

---

它必须选择父级的直接子级。

尝试此操作，取消对console.log的注释，并检查href是否等于您需要的值

<script type="text/javascript" charset="utf-8">
    jQuery(document).ready(function($){
        $("#navigation").each(function(){
            //console.log($(this).attr('href'));
            //console.log(window.location.search);
            if($(this).attr('href') == window.location.search){
                $(this).css("background-Color", "#e9fd99");
            }
        });
    });
</script>

jQuery（文档）.ready（函数（$）{
$（“#导航”）。每个（函数（）{
//console.log（$（this.attr（'href'））；
//console.log（window.location.search）；
if（$（this.attr（'href'）==window.location.search）{
$（this.css（“背景色”，“e9fd99”）；
}
});
});

您的JavaScript存在一些问题。首先，jQuery“each”函数不会迭代选定元素的子元素，而是迭代选定元素的所有实例。有关正在使用的此函数的一些示例，请参见。所以不是

$("#navigation").each(function(){
    ...
});

如果要迭代“li”元素，应该使用

 $("#navigation li").each(function(){
    ...
});

或者选择li元素的更具体的选择器（也可以是基于您提供的HTML的

$（“.open li”）

）。请注意，您不能使用“>”选择器，因为它指定了直接子级，

li

不是

div

的直接子级

其次，一旦您选择了

li

，您就不能引用

（this）.attr（'href'）

，因为

此

引用的是

li

，它没有

href

属性。您需要使用

$（“a”，this）

或

$（this）选择所选
li
下的
a
元素。查找（“a”）

---

最后，

document.URL

返回当前文档的整个URL，http://and all，但您要将其与链接的

href

属性进行比较，该属性只是相对路径

？page=about\u get\u start

。这将永远不会是平等的，即使你在看正确的链接。您需要改用

window.location.pathname

，因为这将返回当前的相对路径。

如果需要，您可以只使用css。给每个页面的主体一个唯一的id，例如about、contact、tags等。然后给每个链接一个唯一的id、aboutlink、contactlink、tagslink等

然后在css中，编写样式：

body#about a#aboutlink,
body#contact a#contactlink,
body#tags a#tagslink {
    background-color: #e9fd99;
}

---

这是一个非常简单的解决方案：您可以使用PHP从URL获取所需的值，并在jQuery代码中插入所获取的值，如：

$('.#').addClass('active'); 

其中“#”是从URL获取的值。例如：

<?php

echo '<script type="text/javascript">
$(document).ready(function(){';
if(intval($_GET['page']) > 0) {
    $from_url = intval($_GET['page']);
    } else {
        if(isset($_GET['page'])) {
        $from_url = $_GET['page'];
        } else {
        $from_url = 'index';
        }
    }
echo '
    $(\'' . $from_url . '\').addClass(\'active\');
    });
</script>';

?>

---

还解释了。

每个链接是否都有导航id？或者那是父元素？那是

父元素

，它是一个

id

，然后你检查每个父元素，它不起作用，子元素类型是什么h1，a，等等。链接嵌套在

ul

中，然后是不起作用的

li

，这些链接也在PHP包含文件中，虽然我不认为这会有什么不同…谢谢大家的建议。我将尝试每一种方法，并在明天酌情回复。再次感谢您的支持。