Tabbed Navigation class swither through javascript

1

Hi All

I have created one function by which i was changing the class name by onclick evnet but it doesn’t work cause once body load it’s vanish…

herewith i am giving you my 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    ) continue;
    chngLis*.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>

and below are the body code:

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

please help me to sort out this and reply ASAP.

2

Here is my method, with an embedded example:


<html>
<head>
<script type="text/javascript">
document.getElementsByClassName = function(clsName){
    var retVal = new Array();
    var elements = document.getElementsByTagName("*");
    for(var i = 0;i < elements.length;i++)
        {
        if(elements*.className.indexOf(" ") >= 0)
                {
            var classes = elements*.className.split(" ");
            for(var j = 0;j < classes.length;j++)
                        {
                if(classes[j] == clsName)
                    retVal.push(elements*);
            }
        }
        else if(elements*.className == clsName)
            retVal.push(elements*);
    }
    return retVal;
}

function xClass( oldClass, newClass )
{
    var tempClass = new Array();
    tempClass = document.getElementsByClassName( oldClass );
    for(x = 0; x < tempClass.length; x++)
    {
        tempClass[x].className = newClass;    
    }
}
</script>
<style type="text/css">
.old{
    font-family:Tahoma;
    font-size:.9em;
    color:#000;
}

.new{
    font-family:Arial, Helvetica;
    font-size:1.3em;
    color:#ff0000;
}
</style>
</head>
<body>
<input type="button" onclick="xClass('old','new');" value="change class..." />
<p class="old">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio. Morbi eu nisl. Praesent feugiat, dui vel fermentum condimentum, neque ipsum tincidunt eros, sed euismod velit lectus in metus. Quisque in diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</body>
</html>
3

Here’s another option…



<script type="text/javascript">

window.onload = function() {

  var ul = document.getElementById('master');
  var lis = ul.getElementsByTagName('li');

  for(var i = 0; i < lis.length; i++) {
    addEvent(lis*, 'click', function() {
      var ul = document.getElementById('master');
      var lis = ul.getElementsByTagName('li');
      for(var j = 0; j < lis.length; j++) {
        lis[j].className = 'toggle_off';
      }

      this.className = 'toggle_on'; 
    }, true);
  }

}

function addEvent(o, type, func, prop)
{
  if(!o) {
    return;
  }
  if (!document.addEventListener && document.attachEvent) {
    o.attachEvent("on" + type, func);
  } else {
    o.addEventListener(type, func, prop);
  }
}

</script>

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

ul#master li {
  background: #ccc;
  display: block;
  float: left;
  padding: 10px;
}
</style>





<ul id="master">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
</ul>