I am looking to add/remove a class from another div when a link is pressed. I have searched through several answers and searched online but could not find an answer that worked for me.

Here is my code:

<nav id="primary-menu"> <a class="menu-toggle">Browse</a>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Rumors</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">Miscellaneous</a></li>
    </ul>
</nav> <!-- end #primary-menu -->

I am looking to add the class active to #primary-menu when .menu-toggle is clicked.

For JS/jQuery, I've tried click, toggle, toggleClass, I've tried inlining the code, I've tried external scripts. Nothing seems to work and I'm not sure why.

I'd really appreciate your responses. PS: I'm not the best with JS/jQuery.

I am looking to add/remove a class from another div when a link is pressed. I have searched through several answers and searched online but could not find an answer that worked for me.

Here is my code:

<nav id="primary-menu"> <a class="menu-toggle">Browse</a>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Rumors</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">Miscellaneous</a></li>
    </ul>
</nav> <!-- end #primary-menu -->

I am looking to add the class active to #primary-menu when .menu-toggle is clicked.

For JS/jQuery, I've tried click, toggle, toggleClass, I've tried inlining the code, I've tried external scripts. Nothing seems to work and I'm not sure why.

I'd really appreciate your responses. PS: I'm not the best with JS/jQuery.

• javascript
• jquery
• onclick

• 1 SO where is the code for jquery/js? – u_mulder Commented Mar 8, 2015 at 20:50
• @u_mulder I didn't include all of the code from my page but yes I did make sure to include the jQuery library. – Connor Commented Mar 9, 2015 at 3:35
• @Connor : although you have the right to choose whatever answer you consider correct, it would be appropriate to give preference to those that were answered first and they are also correct. Alexandander's answer and mine work as good as the chosen one, however If they didn't work for you it may be because the method .on() requires jQuery v1.7+ and you might be using an older version. Just for the record. – JFK Commented Mar 9, 2015 at 15:46
• My apologies @JFK. I had clicked on a random notification and so that might have randomized the order of the responses. I do not have the "reputation" to upvote several comments yet. My apologies. – Connor Commented Mar 10, 2015 at 12:37

4 Answers 4

http://jsfiddle.net/te7brkmj/
this combination of 'click' and 'toggleClass' works for me.

$('.menu-toggle').click( function() {
    $("#primary-menu").toggleClass("someClass");
} );

Try this:

$('.menu-toggle').click( function() {
    $("#primary-menu").toggleClass("someClass");
} );

.someClass{
    color: red;    
}   

 

   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<nav id="primary-menu">

<a class="menu-toggle">Browse</a>

    <ul>

        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Rumors</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">Miscellaneous</a></li>

    </ul>

</nav> <!-- end #primary-menu -->

First make sure that you've loaded jQuery. Then try something like this:

 $( document ).ready(function() {
        $( "li" ).click(function() {
            $( "#primary-menu" ).toggleClass( "active" );
        });
    });   

I am not sure if I understand your question, but I think you are asking a similar question as this..Check out the below link, you can get the classname by Document.getElementsByClassName('Class name').

Remove class from elements in pure Javascript?

You could do

$(".menu-toggle").on("click", function(){
    $(this).parent("#primary-menu").toggleClass("active");
});

NOTE : .on() requires jQuery v1.7+