Javascript下拉菜单 [英] Javascript Dropdown Menus
问题描述
我无法使我的下拉菜单工作。我试图得到一些项目显示在这个标签下，但我不能得到showtab功能工作。我试图给 tabList 等于 currentTab 的底层UL - 但它的错误，然后我可以设置一个z-index让它出现。这是 JSFiddle ：
I'm having trouble getting my drop down menu to work. I'm trying to get a bunch of items to show up under this tab but I can't get the showtab function to work. I'm trying to give tabList equal to currentTab's underlying UL - but it errors out there and then I can't set up a z-index for it to make it show up. Here's a 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
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;
}
推荐答案
部分一个jsfiddle问题 - window.onload没有触发我在所有，即使我选择使用事件侦听器。我不是试图找出原因，而是在 jsbin 上移动到不同的环境，而不是给我麻烦。
I think this is in part a jsfiddle problem - window.onload isn't triggering for me at all, even when I opted to use event listeners. Rather than try to figure out why, I just moved to a different environment over on jsbin, which isn't giving me trouble.
仍然不工作，但错误变得更加明显--currentTab不是文档的属性。你使它成为一个全局变量，所以它不是一个问题。此外，你真的没有任何方法来获取被点击的元素 - 这可以通过发生在点击事件的事件，但是。
Still doesn't work, but the errors become more apparent - currentTab is not a property of document. You made it a global variable though, so it's not a problem. Also, you don't really have any means to get the element that was clicked - this can be gotten through the event that occurs on a click event, though.
所以，我们最终得到showTab的代码：
So, we end up with this code for 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;
}
此外，虽然我知道人们可以得到一个过度的pro jQuery ，它真的是很好在这样的地方 - 它使简单的DOM操作相当多一点。如果你以前没有使用太多，你可以看看。
Also, while I know people can get a little overly pro-jQuery around here, it really is pretty nice in places like this - it makes simple DOM manipulations quite a bit easier. If you haven't used much it before, you might give it a look.
这篇关于Javascript下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
