Forum Moderators: open
var Lst;
function CngClass(obj){
if (Lst) Lst.className='menu_head2';
obj.className='menu_head2_active';
Lst=obj;
}
<p id="header1" class="menu_head2" onclick="CngClass(this);">START</p>
<p id="header2" class="menu_head2" onclick="CngClass(this);">ABOUT</p>
<p id="header3" class="menu_head2" onclick="CngClass(this);">HELP</p>
What I want to achive is that when I again click, for instance header1, the class needs te be changed back to menu_head2.
So the be clear:
Not clicked: header1 class="menu_head2"
Click 1: header1 class="menu_head2_active"
Click 2: header1 class="menu_head2"
So clicking on the same header again should toggle between the classes menu_head2 & menu_head2_active.
I've tried with an else statement but it gives no result:
var Lst;
function CngClass(obj){
if (Lst) Lst.className='menu_head2';
obj.className='menu_head2_active';
Lst=obj;
}
else { obj.className='menu_head2'; }
Can anyone guide me into the right direction?
Second, I would not recommend assigning onClicks to divs, p's, etc., use the natural navigation element, the anchor. It looks like you're going for a navigation of sorts anyway.
Last, one of the problems with setting/getting styles is Javascript is "unaware" of anything but an inline style; you have to specifically set it in a window.onload (as I have done below) or use getComputedStyle - recent discussion [webmasterworld.com]. You'll see I also used the window.onload as an opportunity to remove the inline onClicks and attach behaviors to the links externally.
However,, note that a simple application of an a:active style will do almost the exact same thing, but perhaps you're doing this so you can "toggle it back" after the first click.
clicking on the same header again should toggle between the classes menu_head2 & menu_head2_active.
Toggle it is then. :-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
<!-- doctype all on one line -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
.menu_head2 { color: #000000; }
.menu_head2_active { color: #ff0000; font-weight:700; }
</style>
<script type="text/javascript">
window.onload=function () { setStyles(); };
function setStyles() {
var ids = new Array ('header1','header2','header3');
for (i=0;i<ids.length;i++) {
document.getElementById(ids[i]).className='menu_head2';
document.getElementById(ids[i]).onclick=function() { return CngClass(this); }
}
}
function CngClass(obj){
// uncomment to verify
//alert(obj.className);
obj.className=(obj.className=='menu_head2')?'menu_head2_active':'menu_head2';
return false;
}
</script>
</head>
<body>
<p><a href="#" id="header1" class="menu_head2">START</a></p>
<p><a href="#" id="header2" class="menu_head2">ABOUT</a></p>
<p><a href="#" id="header3" class="menu_head2">HELP</a></p>
</body>
</html>
The script works fine, btw. It sure toggle's ;) Only one crucial thing has been left away in your version. The onclick="CngClass(this); was supposed to change the class back to menu_head2 when a user clicked a different header.
How come that function is disabled right now?
You would just
- remove var from var ids=... in window.onload, making it a global array.
- add a loop in the CngClass function.
revised:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
<!-- doctype all on one line -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
.menu_head2 { color: #000000; }
.menu_head2_active { color: #ff0000; font-weight:700; }
</style>
<script type="text/javascript">
window.onload=function () { setStyles(); };
function setStyles() {
ids = new Array ('header1','header2','header3');
for (i=0;i<ids.length;i++) {
document.getElementById(ids[i]).className='menu_head2';
document.getElementById(ids[i]).onclick=function() { return CngClass(this); }
}
}
function CngClass(obj){
var currObj;
for (i=0;i<ids.length;i++) {
currObj = document.getElementById(ids[i]);
if (obj.id == currObj.id) {
currObj.className=(currObj.className=='menu_head2')?'menu_head2_active':'menu_head2';
}
else { currObj.className='menu_head2'; }
}
return false;
}
</script>
</head>
<body>
<p><a href="#" id="header1" class="menu_head2">START</a></p>
<p><a href="#" id="header2" class="menu_head2">ABOUT</a></p>
<p><a href="#" id="header3" class="menu_head2">HELP</a></p>
</body>
</html>
P.S. - if these links are to actually navigate somewhere, you want to remove return false from the CngClass function and the return keyword from the onclick function in setStyles().
