Change background color of selected item in list

**Mr.Joker** · May 9th, 2012, 05:33 PM

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>

**akhileshbc** · May 9th, 2012, 10:38 PM

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/

**Mr.Joker** · May 10th, 2012, 04:19 AM

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.

**akhileshbc** · May 10th, 2012, 04:26 AM

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.

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.

**Mr.Joker** · May 10th, 2012, 05:07 AM

I tryed but cant do it, its because I dont know Jquery

**akhileshbc** · May 10th, 2012, 05:27 AM

Ok. I have made an example for you: http://jsfiddle.net/GNmfp/

Try clicking those different menus in that fiddle, to see the effect.

**Mr.Joker** · May 10th, 2012, 07:20 AM

Thank you so much

Thread: Change background color of selected item in list

Thread Tools

Display

Change background color of selected item in list

Re: Change background color of selected item in list

Re: Change background color of selected item in list

Re: Change background color of selected item in list

Re: Change background color of selected item in list

Re: Change background color of selected item in list

Re: Change background color of selected item in list

Posting Permissions