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操作变得更加容易。如果你之前没有多用过，你可以试一试。

Javascript Dropdown菜单

1 个答案: