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

Question

我希望页面上的活动链接具有纯色背景。我想我需要 jQuery 来做到这一点。我试过这段代码，但它不起作用..

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

请参阅我的图片以进行澄清：

正如您所看到的 - 根据您在链接上的哪个页面，将有一个保持静态的纯色 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>

Answer 1

如果你愿意，你可以只用 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;
}

Answer 2

您的 JavaScript 存在一些问题。首先，jQuery "each" 函数不会遍历选定元素的子元素，它会遍历选定元素的所有实例。有关此函数的一些使用示例，请参见http://api.jquery.com/each/。所以而不是

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

如果你想遍历“li”元素，你应该使用

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

或者一些更具体的选择 li 元素的选择器（它也可以$(".open li")基于您提供的 HTML）。请注意，您不能使用 ">" 选择器，因为它指定了直接子代，并且li不是div.

其次，一旦选择了li，就不能引用了，(this).attr('href')因为this引用的是li没有href属性的 。您需要使用或a选择所选元素下方的元素。li$("a", this)$(this).find("a")

最后，document.URL返回当前文档的整个 URL，http:// 和 all，但您将它与href链接的属性进行比较，它只是相对路径?page=about_getting_started。即使您正在查看正确的链接，这也永远不会相等。您将希望使用它window.location.pathname，因为这将返回当前的相对路径。

Answer 3

这是一个非常简单的解决方案：您可以使用 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>';

?>

也在这里解释。

Answer 4

我想你是这个意思

         $("#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>

添加这个

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

它必须选择父母的直接孩子。

Answer 5

试试这个，取消注释 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>