Javascript Dropdown Menus

I'm having trouble getting my drop down menu to work. I'm trying to get a bunch of items to show up under this tab but I can't get the showtab function to work. I'm trying to give

Solution 1:

I think this is in part a jsfiddle problem - window.onload isn't triggering for me at all, even when I opted to use event listeners. Rather than try to figure out why, I just moved to a different environment over on jsbin, which isn't giving me trouble.

Still doesn't work, but the errors become more apparent - currentTab is not a property of document. You made it a global variable though, so it's not a problem. Also, you don't really have any means to get the element that was clicked - this can be gotten through the event that occurs on a click event, though.

So, we end up with this code for showTab:

functionshowTab(e) {
    currentTab.style.background = "white";
    currentTab.style.color = "rgb(221,21,255)";
    var newTab = e.target.parentNode;
    var tabList = newTab.getElementsByTagName("ul")[0];
    newTab.style.background = "#ddf";

    maxZ++;
    tabList.style.zIndex = maxZ;
    currentTab = newTab;
} 

Also, while I know people can get a little overly pro-jQuery around here, it really is pretty nice in places like this - it makes simple DOM manipulations quite a bit easier. If you haven't used much it before, you might give it a look.