[JS] onclick function changeclass

donderdag 7 mei 2009 14:35

Acties:

0 Henk 'm!

likkepot

Ghehe ghe heehe!

Topicstarter

Ik heb een scriptje dat de class van een element verdandert zodra er op geklikt wordt.

code:

var Lst;

function CngClass(obj){
 if (Lst) Lst.className='menu_head2';
 obj.className='menu_head2_active';
 Lst=obj;
}

De verschillende elementen zien er zo uit:

code:

1
2
3

<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>

Het script verandert netjes de class menu_head2 in menu_head2_active zodra er op geklikt wordt. Er heeft maar één header tegelijkertijd de class menu_head2_active.

Wat ik wil berijken is dat als ik nóg een keer op dezelfde header klik de class weer terug verandert naar menu_head2. Dus voor de duidelijkheid:
Nog niet geklikt: class="menu_head2"
Klik1: class="menu_head2_active"
Klik2(op dezelfde header): class="menu_head2"

Ik heb het geprobeerd met een else statement maar deze werpt geen vruchten af

:

code:

var Lst;

function CngClass(obj){
 if (Lst) Lst.className='menu_head2';
 obj.className='menu_head2_active';
 Lst=obj;
}
else { obj.className='menu_head2'; }

Kan iemand mij vertellen in welke richting ik beter kan zoeken?

nikszolekkeralss.exe

donderdag 7 mei 2009 16:23

Acties:

0 Henk 'm!

Icelus

De ‘else’ staat nu buiten de functie. De code wordt zodoende nooit bereikt/uitgevoerd.

Je zult moeten controleren of de class menu_head2_active al ingesteld is in obj.
Bijvoorbeeld zo:

JavaScript:

1
2
3

if ( obj.className == 'menu_head2' )
     obj.className = 'menu_head2_active';
else obj.className = 'menu_head2';

Op deze manier wordt er tussen twee CSS-classes gewisseld.

Developer Accused Of Unreadable Code Refuses To Comment

dinsdag 12 mei 2009 12:38

Acties:

0 Henk 'm!

likkepot

Ghehe ghe heehe!

Topicstarter

Ik heb de oplossing gevonden en plaats deze hier wellicht als aanvulling voor de search

Heb me er even verder in verdiept en heb de meer 'modernere' window.onload gebruikt.

code:

<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>

nikszolekkeralss.exe

Onderwerpen