Javascript tabbed navigation..

[haider10686]

Hi All,

I have created a function that's switch the class name on JavaScript onClick event but it's vanish when page load completely.. so it's show the changes for a bit second.... please help me to get rid of this problem

Below is the JavaScript and Html Code:

<script type="text/javascript">
/**
* Function that changes the class information of div elements.
* @param {String} the final part of the id of the clicked element.
* @return {void}
*/
function switcher(the_id){
		var chngLis = document.getElementById('master').getElementsByTagName('li');
		var selected = document.getElementById('li' + the_id);
		selected.className = 'toggle_on';
		for(var i = 0; i < chngLis.length; i++){
			if(selected == chngLis[i]) continue;
			chngLis[i].className = 'toggle_off';
		}	
}
</script>

<style>
.toggle_off {background:#CCCCCC; display:block; float:left; padding:10px; cursor:pointer;}
.toggle_on {background:#993300; display:block; float:left; padding:10px;}
</style>


<ul id="master">
<li class="toggle_off" id="div1" onClick="switcher('1');">1</li>
<li class="toggle_off" id="li2" onClick="switcher('2');">2</li>
<li class="toggle_off" id="li3" onClick="switcher('3');">3</li>
<li class="toggle_off" id="li4" onClick="switcher('4');">4</li>
<li class="toggle_off" id="li5" onClick="switcher('5');">5</li>
<li class="toggle_off" id="li6" onClick="switcher('6');">6</li>
<li class="toggle_off" id="li7" onClick="switcher('7');">7</li>
<li class="toggle_off" id="li8" onClick="switcher('8');">8</li>
<li class="toggle_off" id="li9" onClick="switcher('9');">9</li>
<li class="toggle_off" id="li10" onClick="switcher('10');">10</li>
<li class="toggle_off" id="li11" onClick="switcher('11');">11</li>
<li class="toggle_off" id="li12" onClick="switcher('12');">12</li>
<li class="toggle_off" id="li13" onClick="switcher('13');">13</li>
<li class="toggle_off" id="li14" onClick="switcher('14');">14</li>
<li class="toggle_off" id="li15" onClick="switcher('15');">15</li>
<li class="toggle_off" id="li16" onClick="switcher('16');">16</li>
<li class="toggle_off" id="li17" onClick="switcher('17');">17</li>
<li class="toggle_off" id="li18" onClick="switcher('18');">18</li>
<li class="toggle_off" id="li19" onClick="switcher('19');">19</li>
</ul>

[acoder]

What do you mean by "it vanishes when the page loads completely"? If it's triggered onclick, what does that have to do with page load? Show the rest of the code in case there's something else which is causing the problem.