Problem with JQuery changing background-color in CSS
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");
加载中,请稍侯......
精彩评论