Change Css Class of li in ul onclick with Query String
Copy and paste and run the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>List Item Menu - Query String</title>
<style type="text/css">
ul
{
list-style-type:none;
float:left;
border-bottom: solid 2px Red;
padding-right:40px;
}
ul li
{
float:left;
width:auto;
cursor:pointer;
}
ul li a
{
text-decoration:none;
color:#000000;
padding:8px;
display:block;
}
</style>
<script type="text/javascript" language="javascript">
function checklist(ctrl)
{
var list = document.getElementById("menu").getElementsByTagName('li');
for(i=0; i<list.length; i++)
{
list[i].style.background
= '#ffffff';
}
}
window.onload
= function()
{
var qstr =location.search.substring(1).split('=')[1];
document.getElementById(qstr).style.background
= '#ff0000';
}
</script>
</head>
<body>
<ul id="menu">
<li id="one" onclick="checklist(this);"><a href="?page=one"> A Item</a></li>
<li id="two" onclick="checklist(this);"><a href="?page=two">B Item</a></li>
<li id="three" onclick="checklist(this);"><a href="?page=three">C Item</a></li>
</ul>
<div style="clear:both"></div>
<br />
<br />
</body>
</html>
hey thanks anish,
ReplyDeletethat really helped,
Thanks Anish ,that realy helped.
ReplyDeletethanks a lot