-
May 9th, 2012, 05:33 PM
#1
Thread Starter
Addicted Member
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>
-
May 9th, 2012, 10:38 PM
#2
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/
If my post was helpful to you, then express your gratitude using Rate this Post.
And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet
Social Group: VBForums - Developers from India
Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...
-
May 10th, 2012, 04:19 AM
#3
Thread Starter
Addicted Member
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.
-
May 10th, 2012, 04:26 AM
#4
Re: Change background color of selected item in list
If my post was helpful to you, then express your gratitude using Rate this Post.
And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet
Social Group: VBForums - Developers from India
Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...
-
May 10th, 2012, 05:07 AM
#5
Thread Starter
Addicted Member
Re: Change background color of selected item in list
I tryed but cant do it, its because I dont know Jquery
-
May 10th, 2012, 05:27 AM
#6
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.
If my post was helpful to you, then express your gratitude using Rate this Post.
And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet
Social Group: VBForums - Developers from India
Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...
-
May 10th, 2012, 07:20 AM
#7
Thread Starter
Addicted Member
Re: Change background color of selected item in list
Thank you so much
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|