Javascript 下拉菜单

Question

我无法使用下拉菜单。我试图让一堆元素显示在此选项卡下，但我无法使用 showtab 功能。我试图让 tabList 等于 currentTab 的底层 UL - 但它在那里出错，然后我无法为其设置 z-index它出现了。这是一个 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

我认为这在一定程度上是一个 jsfiddle 问题 - window.onload 根本不会触发我，即使我选择使用事件监听器也是如此。我没有试图找出原因，而是在 jsbin 上搬到了一个不同的环境。 ，这不会给我带来麻烦。

仍然不起作用，但错误变得更加明显 - currentTab 不是文档的属性。不过你把它变成了一个全局变量，所以这不是问题。此外，您实际上没有任何方法来获取被单击的元素——不过这可以通过发生在单击事件上的事件来获取。

因此，我们最终得到了 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;
} 

此外，虽然我知道人们在这里可能会有点过度支持 jQuery，但它在这样的地方确实非常好 - 它使简单的 DOM 操作变得更加容易。如果您以前没有使用过，不妨看看。