Question

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 tabList equal to currentTab‘s underlying UL – but it errors out there and then I can’t set up a z-index for it to make it show up. Here’s a JSFiddle:

HTML

<ul class="tabMenu">
         <li class="tab" style="background-color: rgb(221, 221, 255)"><a href="#">Computers</a>
            <ul style="z-index: 1">
               <li><a href="#">Desktop</a></li>
               <li><a href="#">Notebooks</a></li>
               <li><a href="#">Tablets</a></li>
               <li><a href="#">Remanufactured</a></li>
            </ul>
         </li>
         <li class="tab"><a href="#">Electronics</a>
            <ul>
               <li><a href="#">Televisions</a></li>
               <li><a href="#">Cameras</a></li>
               <li><a href="#">Camcorders</a></li>
               <li><a href="#">MP3 Players</a></li>
               <li><a href="#">Game Stations</a></li>
               <li><a href="#">PDAs</a></li>
            </ul>
         </li>
         <li class="tab"><a href="#">Accessories</a>
            <ul>
               <li><a href="#">Monitors</a></li>
               <li><a href="#">Printers</a></li>
               <li><a href="#">Memory</a></li>
               <li><a href="#">Drives</a></li>
               <li><a href="#">Networking</a></li>
               <li><a href="#">Mobile</a></li>
            </ul>
         </li>
         <li class="tab"><a href="#">Software</a>
            <ul>
               <li><a href="#">Utilities</a></li>
               <li><a href="#">Business</a></li>
               <li><a href="#">Games</a></li>
               <li><a href="#">Multimedia</a></li>
               <li><a href="#">Operating Systems</a></li>
            </ul>
         </li>
         <li class="tab"><a href="#">Services</a>
            <ul>
               <li><a href="#">Tech Support</a></li>
               <li><a href="#">Downloads</a></li>
               <li><a href="#">Drivers</a></li>
               <li><a href="#">Documents</a></li>
               <li><a href="#">Customer Service</a></li>
               <li><a href="#">Contacts</a></li>
            </ul>
         </li>
         <li class="tab"><a href="#">Store</a>
            <ul>
               <li><a href="#">Shopping Cart</a></li>
               <li><a href="#">Checkout</a></li>
               <li><a href="#">Your Account</a></li>
               <li><a href="#">Shipping</a></li>
               <li><a href="#">Specials</a></li>
            </ul>
         </li>
      </ul>​

CSS

ul                  {list-style-type: none}
ul a                {color: black; text-decoration: none}
.tabMenu            {position: absolute; top: 33px; left: 90px; width: 800px}
.tabMenu > li       {width: 100px; height: 20px; text-align: center;
                     float: left; margin-right: 5px}
.tabMenu > li > a   {display: block; margin: 0px; padding: 2px 3px;
                     border-left: 2px solid rgb(221, 221, 221); 
                     border-top: 2px solid rgb(155, 155, 155);
                     border-right: 4px solid rgb(102, 102, 102);
                     border-bottom: 1px solid white}
.tabMenu > li > a:hover {color: black; background-color: rgb(221, 221, 255)}


.tabMenu > li > ul  {position: absolute; top: 20px; left: 0px; width: 710px;
                     padding-top: 5px;
                     background-color: rgb(221, 221, 255);
                     border-left: 2px solid rgb(221, 221, 221);
                     border-right: 4px solid rgb(102, 102, 102);
                     border-bottom: 1px solid black}

.tabMenu > li > ul > li {float: left; width: 16%; height: 25px}
.tabMenu > li > ul > li > a {display: block; margin: 0px; padding: 2px 3px;
                             font-size: 0.9em}
.tabMenu > li > ul > li > a:hover {color: blue}​

Javascript

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

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

    currentTab = menuTabs[0];
}

function showTab(){
    var tabList = document.currentTab.ul;
    currentTab.style.bgcolor = "white";
    currentTab.style.color = "rgb(221,21,255)";
    maxZ++;
    tabList.style.zIndex = maxZ;
}​

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

function showTab(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.