【发布时间】:2013-05-09 08:23:06
【问题描述】:
我想使用 javascript 选择启用菜单的锚点,这是一个小图像,当我单击它时,它应该更改背景类以突出显示菜单。 更改类有效,我尝试了 document.onclick 并且它有效,但是当我尝试启用特定的 wrapper>nav> a.menu 时,它不会选择它。 我试过了:
var menu = document.getElementById('nav');
var anchor = menu.getElementsByTagName('a');
能够点击每个链接只是为了测试,但它没有工作。
我试过了:
var anchor = menu.getElementsByClassName('menu-enabled');
然后
anchor.onclick...` but still no result :(
尝试使用 jquery$("a.menu-enabled").onclick = function()
但还是没有结果
当前设置为单击文档上的任意位置,直到我完成为止。
<script>
document.onclick = function() {
$(".overlay").toggleClass("overlay-show");
}
</script>
<div id="wrapper">
<div class="logo">
<a href="index.html">Tro</a>
</div>
<nav id="nav" class="menu-icon">
<a class="menu-enabled"> </a>
<a class="link-enabled" target="_blank"> </a>
<a class="prev-disabled"> </a>
<a class="next-disabled"> </a>
<a class="back-disabled"> </a>
</nav>
<div class="overlay">
<nav class="meniu">
<a href="#1">Link 1</a>
<a href="#2">Link 2</a>
<a href="#3">Link 3/a>
<a href="#4">Link 4</a>
</nav>
编辑1:小提琴http://jsfiddle.net/bFXZj/
编辑 2:好的,我认为问题是我无法单击按钮,在其他东西上尝试过它并且它有效,我认为 z-index 是问题,很快就会返回答案。
编辑3:可能是因为我给锚定了背景?
nav.menu-icon a.menu-enabled{
background: url(http://www.xxx.xx/menu.png) no-repeat 0 0;
background-size: 24px 24px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
opacity: 1;
visibility: visible;
z-index: 99;
}
【问题讨论】:
-
请创建小提琴..?
-
阅读Node、NodeList和jQuery events;了解差异。然后再试一次,看看你能不能让它工作。
标签: javascript jquery class selector