Change Css Class of li in ul onclick with Anchor Tag
Below code is some modification as on demand of one of the reader for topic
Change Css Class of li in ul onclick
<!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</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';
var hidePage = list[i].getElementsByTagName('a')[0].href.split('#')[1];
document.getElementById('#' + hidePage).style.display = 'none';
}
ctrl.style.background = '#ff0000';
var gotoPage = ctrl.getElementsByTagName('a')[0].href.split('#')[1];
document.getElementById('#' + gotoPage).style.display = 'block';
}
</script>
</head>
<body>
<ul id="menu">
<li onclick="checklist(this);"><a href="#pageOne"> A Item</a></li>
<li onclick="checklist(this);"><a href="#pageTwo">B Item</a></li>
<li onclick="checklist(this);"><a href="#pageThree">C Item</a></li>
</ul>
<div style="clear:both"></div>
<br />
<br />
<div id="#pageOne" style="display:none">
Page One content
</div>
<div id="#pageTwo" style="display:none">
Page Two content
</div>
<div id="#pageThree" style="display:none">
Page Three content
</div>
</body>
</html>
Change Css Class of li in ul onclick
<!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</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';
var hidePage = list[i].getElementsByTagName('a')[0].href.split('#')[1];
document.getElementById('#' + hidePage).style.display = 'none';
}
ctrl.style.background = '#ff0000';
var gotoPage = ctrl.getElementsByTagName('a')[0].href.split('#')[1];
document.getElementById('#' + gotoPage).style.display = 'block';
}
</script>
</head>
<body>
<ul id="menu">
<li onclick="checklist(this);"><a href="#pageOne"> A Item</a></li>
<li onclick="checklist(this);"><a href="#pageTwo">B Item</a></li>
<li onclick="checklist(this);"><a href="#pageThree">C Item</a></li>
</ul>
<div style="clear:both"></div>
<br />
<br />
<div id="#pageOne" style="display:none">
Page One content
</div>
<div id="#pageTwo" style="display:none">
Page Two content
</div>
<div id="#pageThree" style="display:none">
Page Three content
</div>
</body>
</html>
Comments
Post a Comment