tabbed menu to show divs and change class

[adambedford]

I'm making a tabbed menu that displays an inline div onclick. I've written this and got it to switch between divs when clicking a subsequent menu item but I am having a little trouble switching the class of the <li> tab onclick.

 

I know how to add a class to an element but the problem I'm having is that I don't know how to remove it when another tab is clicked and switch the class to that tab.

 

My menu script is as follows (it's probably quite cumbersome by professional standards but it works for me!)

 

function menudiv (layertoshow, layertohide)
{
  //Declare the variables	
  var show, hide, show_vis, hide_vis;
  
  //code for show layer
  if( document.getElementById ) // this is the way the standards work
    show = document.getElementById( layertoshow );
  else if( document.all ) // this is the way old msie versions work
      show = document.all[layertoshow];
  else if( document.layers ) // this is the way nn4 works
    show = document.layers[layertoshow];
  show_vis = show.style;
  
  //code for hide layer
  if( document.getElementById ) // this is the way the standards work
    hide = document.getElementById( layertohide );
  else if( document.all ) // this is the way old msie versions work
      hide = document.all[layertohide];
  else if( document.layers ) // this is the way nn4 works
    hide = document.layers[layertohide];
  hide_vis = hide.style;
  
  // if the style.display value is blank we try to figure it out here
  if(show_vis.display==''&&show.offsetWidth!=undefined&&show.offsetHeight!=undefined)
    show_vis.display = (show.offsetWidth!=0&&show.offsetHeight!=0)?'block':'none';
  show_vis.display = (show_vis.display==''||show_vis.display=='block')?'none':'block';
  
  
  if(hide_vis.display==''&&hide.offsetWidth!=undefined&&hide.offsetHeight!=undefined)
    hide_vis.display = (hide.offsetWidth!=0&&hide.offsetHeight!=0)?'none':'block';
  hide_vis.display = (hide_vis.display==''||hide_vis.display=='none')?'none':'none';
  

}

 

How would I go about integrating into the above script something that, when the tab is selected, adds the class "tab_selected" to the <li>. I guess I would need to pass the id of the <li> to the function but I don't know what to do from there so that when the next tab is selected, the previous one has the class removed.

 

I only have two tabs that I need to switch between, hence why I pass a 'tab to show' and a 'tab to hide' variable. I don't need it to work with more menu items.

 

Any thoughts?

[Adam]

Without having looked too much into your code, are you aware of the className property? If you're only using a single class name for each element then it's extremely simple to switch between, but even with multiple it's just a case of some simple string substitution.