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操作更容易一些。如果你之前沒有使用太多，你可以試試看。