CODEWITHSUNDEEP
javascriptjqueryclassselector
tmanolescu
tmanolescu

Reputation: 39

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

Upvotes: 0

Views: 2129

Answers (2)

Maloric
Maloric

Reputation: 5615

The jQuery version would be something like this:

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

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

Edit:

Updated your jsFiddle and it works: http://jsfiddle.net/bFXZj/1/

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try

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

Upvotes: 1

Related Questions