Question

我希望页面上的活动链接具有稳定的bg颜色。我想我需要jQuery才能做到这一点。我试过这段代码，但它不起作用..

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

见我的图片澄清：

enter image description here

正如您所看到的 - 根据您在链接上的哪个页面，一个稳定的BG颜色会保持静止..

----------------------- UPDATE ----------------------- -

HTML code：

<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

我认为你的意思是

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

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

Answer 4

您的JavaScript存在一些问题。首先，jQuery“each”函数不会遍历所选元素的子元素，它会迭代所选元素的所有实例。有关正在使用的此功能的一些示例，请参阅http://api.jquery.com/each/。而不是

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

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

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

或更具体的选择器，用于选择li元素（根据您提供的HTML，它也可以是$(".open li")）。请注意，您无法使用“＆gt;”选择器因为它指定了直接子项，li不是div的直接子项。

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

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

Answer 5

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

?>

还解释了here。

使活动页面链接保持稳定的bg颜色

5 个答案: