Problem with JQuery changing background-color in CSS_问答_开发者

Problem with JQuery changing background-color in CSS

开发者 https://www.devze.com 2023-03-09 03:40 出处：网络

What I have is a basic navigation with five links. The navigation bar has a background image and a darker shade when there\'s a mouse hover. What I\'m trying to do is add a little jquery script to the

相关专题：css jquery

What I have is a basic navigation with five links. The navigation bar has a background image and a darker shade when there's a mouse hover. What I'm trying to do is add a little jquery script to the top of each page to change the color of the link of the current page to the hover color... ie. if I'm on the contact page the contact link on the nav bar would be the darker color so that it's very obvious which page you're on. So far I have this:

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

and then something like this at the top of each of the pages (here would be the one for reviews.html)

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

But it's not working at all. I've just started using JQuery so I'm sure it's something simple, but I've tried a number of solutions on my own and I'm stumped.

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

The basic code you posted works - see jfiddle

for an example. As Hailwood indicates, something else is likely going on and more info will be needed. A link to your page would be easiest.

Since the OPs question is solved, I'm adding this snippet to make the maintenance of the menu a little easier, using the page url to set the selector rather than having to change the code manually on each page as the poster indicated:

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

Can we please see some css for your menu?

Also, I might suggest you use

$(function(){}) as opposed to $(document).ready(function(){})

I think I know what is going on, but I need to see your css to be sure.

It's:

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

Problem with JQuery changing background-color in CSS

精彩评论

关注公众号

热门标签

图文推荐

Problem with JQuery changing background-color in CSS

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：