자바 스크립트 드롭 다운 메뉴

Question

내 드롭 다운 메뉴가 제대로 작동하지 않습니다. 이 탭 아래에 표시 할 항목이 많아 지려고 노력하고 있지만 작업 표시 줄 기능을 사용할 수 없습니다. tabList을 currentTab의 기본 UL과 동일하게하려고 노력하고 있습니다. 그러나 거기에 오류가 있으며 그 다음에는 Z- 색인을 설정하여 표시되도록 설정할 수 없습니다. 여기 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}​ 

자바 스크립트

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은 문서의 속성이 아닙니다. 당신은 글로벌 변수로 만들었지 만 문제는 아닙니다. 또한 클릭 된 요소를 가져올 방법이 없습니다. 클릭 이벤트에서 발생하는 이벤트를 통해 얻을 수 있습니다. 나는 사람들이 주변에서 조금 지나치게 친 jQuery를 얻을 수있어, 정말이 같은 장소에서 꽤 좋은 반면,

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

또한 - 그것을 :

그래서, 우리는 showTab이 코드와 끝까지 간단한 DOM 조작이 훨씬 쉽습니다. 이전에 많이 사용하지 않았다면 한번 살펴 보시기 바랍니다.