Reputation: 157
I started learning CSS these days, currently i was given with one CSS task, i've tried but iam not getting it..
here is my requirement:
The site is http://mywebsite.com/ .
You will notice the the menu bar has a hover the color is #1B3E70
.
That's the color I want to the selected menu bar item to display when the on the corresponding area/page.
I tried as below but not getting:
a:visited{
background: #1B3E70;
}
please suggest me..
Upvotes: 3
Views: 38590
Reputation: 3763
With Reference to your link (classes and id) :
HTML
<li class="menu-item">
<a href="#">About</a>
<a href="#">Home</a>
</li>
CSS
.menu-item{
list-style:none;
}
.menu-item a{
padding:20px;
padding-bottom:10px;
border:1px solid #1B3E70;
color:#1B3E70;
text-decoration:none;
}.menu-item a:hover{
background-color:#1B3E70;
color:white;
}
.menu-item .active{
background-color:#1B3E70;
color:white;
}
Jquery
$('.menu-item a').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
Live Example http://jsfiddle.net/7VBy9/
Upvotes: 7
Reputation: 122
Try,
jQuery(function(){
jQuery('#nav li a').click(function() {
jQuery('#nav li a').removeClass('active');
jQuery(this).addClass('active');
});
});
Also add following css to your file
.links a.active {
color: #FFFFFF;
background-color: #1B3E70;
}
Upvotes: 0
Reputation: 38112
If you means highlight the current menu text when it's clicked, then you can try to use this code:
$(function() {
$('#nav li').click(function() {
$(this).find('a').addClass('active');
$(this).siblings('li').find('a').removeClass('active');
})
});
and add .active
in your css:
.active {
background: #1B3E70;
}
Upvotes: 0
Reputation: 1315
Try using this for changing the color.
a:visited {color: #1B3E70;}
Upvotes: -1
Reputation: 82251
The background-color on a:visited only seems to work in FF, Chrome and Safari. if the normal a has a background-color, either explicitly defined or through inherit (the direct parent must actually have a background-color for this to be true).
Obviously it is not ideal to have to define a background-color for a all the time, as the site may have a background image.
Upvotes: 0