Question

我所拥有的是具有五个链接的基本导航。当鼠标悬停时，导航栏有背景图像和较暗的阴影。我要做的是在每个页面的顶部添加一个小jquery脚本，将当前页面的链接颜色更改为悬停颜色...即。如果我在联系页面上，导航栏上的联系人链接将是较暗的颜色，这样你就可以看到哪个页面非常明显。到目前为止，我有这个：

<div class="navigation">
    <ul>
    <li><a href="index.html" id="home">Home</a></li>
    <li><a href="reviews.html" id="reviews">Reviews</a></li>
    <li><a href="guestbook.html" id="guestbook">Guestbook</a></li>
    <li><a href="book.html" target="_blank" id="about">About</a></li>
    <li><a href="contact.html" id="contact">Contact</a></li></ul>
</div>

然后在每个页面的顶部出现类似的内容（这里是reviews.html的内容）

<head>
    <script src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () { 
            $('#reviews').css("background-color", "#6d7f45"); 
        });
    </script>
</head>

但它根本不起作用。我刚刚开始使用JQuery，所以我确信它很简单，但我自己尝试了很多解决方案而且我很难过。

CSS：

div.navigation {
    width: 950px;
    background-image: url('../images/navbg.png');
    letter-spacing:2px;
    height: 35px;
    background-color: #679847;
    text-transform:uppercase;
}

div.navigation ul {
    padding-right: 50px;
    padding-left: 50px;
    padding-top: 10px;
    list-style:none;
}

div.navigation li {
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
}

div.navigation a {
    background-image: url('../images/navbg.png');
    text-decoration: none;
    padding: 8px;
    color: #FFFFFF;
}


div.navigation a:link {
    color:#FFFFFF;
    text-decoration:none;
}      /* unvisited link */

div.navigation a:visited {
    color:#FFFFFF;
    text-decoration:none;
}  /* visited link */


div.navigation a:hover {
    background-image: url('../images/navbg_hover.png');
    color:#FFFFFF;
    text-decoration:none;
    background-color: #6d7f45;
}  /* mouse over link */

div.navigation a:active {
    color:#FFFFFF;
    text-decoration:none;
}  /* selected link */

Answer 1

您发布的基本代码有效 - 请参阅jfiddle

举个例子。正如Hailwood指出的那样，还有其他事情可能发生，需要更多信息。指向您网页的链接最简单。

由于OP问题已经解决，我正在添加这个片段，以便更轻松地维护菜单，使用页面网址设置选择器而不必像每张海报所示在每页上手动更改代码：

<script type="text/javascript">
    $(document).ready(function () { 
        var url = document.location.toString();
        var url_array = url.split("/");
        // get last item in array
        var last = url_array[url_array.length-1];
        $('.navigation a').each( function() {
          // if it matches
          if ($(this).attr('href').indexOf(last) != -1)
          $(this).css('background-color', '#6d7f45');
        });
    });
</script>

Answer 2

我们可以为您的菜单看一些css吗？

另外，我建议您使用

$(function(){})而不是$(document).ready(function(){})

我想我知道发生了什么，但我需要确定你的css。

Answer 3

这是：

$('#reviews').css("backgroundColor", "#6d7f45");

JQuery在CSS中改变背景颜色的问题

3 个答案: