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:
Expand|Select|Wrap|Line Numbers
- <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>