Menu
Hi,
I want to change the background color of li element to be changed when clicked. So when the user clicks on first li, the background color should be in red, and when he clicks second one, the second one should change to red, but the first one should go to white.
In short, the background color of selected li should be changed to show it is highlighted.
Also the checkbox should also be checked for only selected li.
I have tried to do like below. But it is changing for all selected li’s..
Please help.
<html>
<head>
<script type=”text/javascript” src=”
<script>
$(document).ready(function(){
$(“li.gc”).click(function(){
$(“li.gc”).each(function(i)
{
$(“li.gc[i]“).css({backgroundColor:’#FFA700′});
});
$(this).css({backgroundColor: ‘#000000’});
$(this).children(“input[type=checkbox]”).attr(‘checked’, ‘checked’);
//do something with the sortcat
});
});
</script>
</head>
<body>
<ul>
<li class=”gc”>
<input type=”checkbox”/>Check1
<a href=”#”>Link1</a>
</li>
<li class=”gc”>
<div>
<input type=”checkbox”/>Check2
<a href=”#”>Link1</a>
</div>
</li>
<li class=”gc”>
<div>
<input type=”checkbox”/>Check3
<a href=”#”>Link1</a>
</div>
</li>
<li class=”gc”>
<div>
<input type=”checkbox”/>Check4
<a href=”#”>Link1</a>
</div>
</li>
</ul>
</body>
</html>