2013-05-09 67 views
0

我想選擇使用JavaScript的菜單啓用錨點,這是一個小圖像,當我點擊它時,它應該更改背景的類以突出顯示菜單。 更改類的作品,我試過document.onclick,它的工作原理,但當我試圖成爲具體的包裝>導航> 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">&nbsp;</a> 
       <a class="link-enabled" target="_blank">&nbsp;</a> 
       <a class="prev-disabled">&nbsp;</a> 
       <a class="next-disabled">&nbsp;</a> 
       <a class="back-disabled">&nbsp;</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:好了,我認爲這個問題是我不能按一下按鈕,試圖在別的東西,它的工作,我thinkg的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; 
} 
+0

請小提琴創造小提琴..? – 2013-05-09 08:25:16

+0

閱讀[Node](https://developer.mozilla.org/en-US/docs/DOM/Node),[NodeList](https://developer.mozilla.org/en-US/docs/DOM/NodeList)和[jQuery events](http://api.jquery.com/category/events/);瞭解差異。然後再試一次,看看你是否能得到它的工作。 – elclanrs 2013-05-09 08:26:54

回答

0

試試

$(document).ready(function(){ 
    $(document).on('click', 'a.menu-enabled', function(e){ 
     // Do something 
    }); 
}); 
0

jQuery的版本是這樣的:

$(document).ready(function(){ 
    $('a.menu-enabled').click(function(e){ 
     // Do something 
    }); 
}); 

不是$("a.menu-enabled").onclick = function()

編輯:

更新您的jsfiddle和它的作品:http://jsfiddle.net/bFXZj/1/

+0

嘗試..仍然是同樣的問題 – tmanolescu 2013-05-09 09:22:16

+0

只是嘗試了相同的代碼在jsFiddle,它的工作 – Maloric 2013-05-09 09:58:19

+0

是的,它適用於jsFiddle,我認爲這是一個css問題:( – tmanolescu 2013-05-09 09:59:48