...

View Full Version : Tabbed Menu help



johnmac81
05-23-2012, 12:43 AM
Hi everyone. I am a new comer to Javascript but love it so far. I just seem to keep hitting little walls like this one. It is a tabbed menu. I cannot seem to get the old title menu to return to white when you float over the next menu title. Also, the sub menu is not appearing under the title menu. Any advice would be helpful. I am convinced and hopeful it is something simple. Here is my code:

window.onload = setTabs();
var currentTab = null;
var maxZ = 1;
var tabList;

function setTabs(){
var menuTabs = new Array();
var allElems = document.getElementsByTagName("*");

for(var i = 0; i < allElems.length; i++){
if(allElems[i].className == "tab") menuTabs.push(allElems[i]);
}
for (var i = 0; i < menuTabs.length; i++){
menuTabs[i].onclick = showTab;
}

}


function showTab(){
currentTab.style.backgroundcolor = "white";
tabList = this.getElementsByTagName("ul")[0];
tabList.style.zIndex = maxZ;
currentTab = this;
currentTab.style.backgroundcolor = "rgb(221, 221, 255)";
}

Old Pedant
05-23-2012, 01:08 AM
I cannot seem to get the old title menu to return to white when you float over the next menu title.
??? You don't have any code at all in there for "float over". The only time you change something is via an onclick, not via an onmouseover.

Also, you aren't checking for a null in currentTab, so you will have an error in your showTab() on its first line and so it won't ever work.

Also, there's no reason for the array in your setTabs() function.


window.onload = setTabs();
var currentTab = null;
var maxZ = 1;

function setTabs(){
var allElems = document.getElementsByTagName("*");
for(var i = 0; i < allElems.length; i++)
{
var e = allElems[i];
if(e.className == "tab")
{
e.onclick = showTab;
}
}
}

function showTab()
{
if ( currentTab != null )
{
currentTab.style.backgroundcolor = "white";
// shouldn't you change the zIndex of the the "tabList" for currentTab???
}
var tabList = this.getElementsByTagName("ul")[0];
tabList.style.zIndex = maxZ;
currentTab = this;
currentTab.style.backgroundcolor = "rgb(221, 221, 255)";
}

It would have helped a lot if you had shown the HTML that goes with this. Could surely make it even more efficient.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum