Change Css Class of li in ul onclick - Menu Linked Pages
Below code is posted on this blog on demand. This topic is
modification of the topic
Change Css Class of li in ul
onclick
Previous code sample is single page code. Now I have three different
pages that are linked to three menu items. When Page One is clicked then menu
Page One is highlighted and menupageone.html is navigated, when Page Two is
clicked then menu Page Two is highlighted and menupagetwo.html and soon.
menupageone.html
– code , copy paste the below code and save with name menupageone.html
<!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">
*
{
font-family: Calibri;
font-size: 14px;
}
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()
{
var list = document.getElementById("menu").getElementsByTagName('li');
for (var i = 0; i
< list.length; i++)
{
list[i].style.background = '#ffffff';
}
}
window.onload = function ()
{
checklist();
document.getElementById("one").style.background
= '#ff0000';
};
</script>
</head>
<body>
<ul id="menu">
<li id="one"><a href="menupageone.html">Page One</a></li>
<li id="two"><a href="menupagetwo.html">Page Two</a></li>
<li id="three"><a href="menupagethree.html">Page Three</a></li>
</ul>
<div style="clear: both">
</div>
<br />
<br />
</body>
</html>
menupagetwo.html
– code , copy paste the below code and save with name menupagetwo.html
<!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">
*
{
font-family: Calibri;
font-size: 14px;
}
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()
{
var list = document.getElementById("menu").getElementsByTagName('li');
for (var i = 0; i
< list.length; i++)
{
list[i].style.background = '#ffffff';
}
}
window.onload = function ()
{
checklist();
document.getElementById("two").style.background
= '#ff0000';
};
</script>
</head>
<body>
<ul id="menu">
<li id="one"><a href="menupageone.html">Page One</a></li>
<li id="two"><a href="menupagetwo.html">Page Two</a></li>
<li id="three"><a href="menupagethree.html">Page Three</a></li>
</ul>
<div style="clear: both">
</div>
<br />
<br />
</body>
</html>
menupagethree.html
– code , copy paste the below code and save with name menupagethree.html
<!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">
*
{
font-family: Calibri;
font-size: 14px;
}
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()
{
var list = document.getElementById("menu").getElementsByTagName('li');
for (var i = 0; i
< list.length; i++)
{
list[i].style.background = '#ffffff';
}
}
window.onload = function ()
{
checklist();
document.getElementById("three").style.background
= '#ff0000';
};
</script>
</head>
<body>
<ul id="menu">
<li id="one"><a href="menupageone.html">Page One</a></li>
<li id="two"><a href="menupagetwo.html">Page Two</a></li>
<li id="three"><a href="menupagethree.html">Page Three</a></li>
</ul>
<div style="clear: both">
</div>
<br />
<br />
</body>
</html>
Code for all
pages is same, only change is in the script
window.onload = function
()
{
checklist();
document.getElementById("three").style.background
= '#ff0000';
};
Comments
Post a Comment