Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Tabbed Menu help

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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,103
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    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.
    Code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •