tmanolescu tmanolescu - 25 days ago 6
Javascript Question

selecting anchor elements with specific class

I want to select the menu-enabled anchor with javascript, which is a small image and when I click it it should change a class of the background to highlight the menu.
The change class works, I tried document.onclick and it works, but when I try to be specific wrapper>nav> a.menu-enabled it doesn't select it.
I've tried:

var menu = document.getElementById('nav');
var anchor = menu.getElementsByTagName('a');


to be able to click on every link just to test, but it didn't work.

I've tried:

var anchor = menu.getElementsByClassName('menu-enabled');


and then

anchor.onclick...` but still no result :(


tried using jquery

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

but still no result

Currently is set to click anywhere on the document until I get it done.

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


Edit 1: fiddle http://jsfiddle.net/bFXZj/

Edit 2: Ok, I think the problem is I could not click the button, tried it on something else and it worked, I thinkg the z-index is the problem, gonna return with an answer soon.

Edit 3: it could be because I gave the anchor a background?

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

Answer Source

Try

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