Change background color of selected item in list
How can I change background color in selected item in list with javascript?
Here is code I got:
HTML Code:
<html>
<title>Testing</title>
<style type="text/css">
body {
background-color:black;
}
#navigation ul{ width: 150px; }
#navigation ul li {
list-style: none;
background-color: transparent;
border-top: none;
text-align: left;
margin: 0;
}
#navigation ul li a {
display: block;
text-decoration: none;
color:white;
padding: .25em;
border-bottom: none;
border-right: none;
}
#navigation ul li:hover {
background-color:lightblue;
}
</style>
<head>
<script type="text/javascript">
</script>
</head>
<body>
<div id ="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</body>
</html>
Re: Change background color of selected item in list
Use a:hover to change the color of the anchor.
Check this example that I have made for you: http://jsfiddle.net/DNmGt/
HTML
html Code:
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
CSS
css Code:
ul{list-style: none;}
li{float: left; width: 75px;}
li a{text-decoration:none; }
li a:hover{background-color: #c2c2c2;}
If you really want it the other side, you could use the following jQuery code:
Code:
$('#nav li').hover(function(){
$(this).css('background-color', '#c2c2c2');
}, function(){
$(this).css('background-color', 'transparent');
});
HTML
html Code:
<ul id="nav">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
CSS
css Code:
ul{list-style: none;}
li{float: left; width: 75px; text-align: center;}
li a{text-decoration:none; }
See it in action: http://jsfiddle.net/w3BAF/
:wave:
Re: Change background color of selected item in list
You didnt understood me quite well but this is ok If I need hover but I need to make background-color forever active depending which list item was clicked and as soon other is clicked the last will be transparent and enw one will ged background-color. But still +1 for your work. :)
Re: Change background color of selected item in list
Quote:
Originally Posted by
Mr.Joker
You didnt understood me quite well but this is ok If I need hover but I need to make background-color forever active depending which list item was clicked and as soon other is clicked the last will be transparent and enw one will ged background-color. But still +1 for your work. :)
Oops! Now a days my brain is a bit slow. And my eyes doesn't catches the real question. :D
There is an addClass() in jQuery. Check the examples in it: http://api.jquery.com/addClass/
Write a CSS class that will set the background-color. And attach the click event for the li, to call the addClass() passing the class name as parameter.
:wave:
Re: Change background color of selected item in list
I tryed but cant do it, its because I dont know Jquery :(
Re: Change background color of selected item in list
Ok. I have made an example for you: http://jsfiddle.net/GNmfp/
Try clicking those different menus in that fiddle, to see the effect.
:wave:
Re: Change background color of selected item in list
