2

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.

j08691
  • 204,283
  • 31
  • 260
  • 272
Connor
  • 71
  • 1
  • 1
  • 9
  • 1
    SO where is the code for jquery/js? – u_mulder Mar 08 '15 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 Mar 09 '15 at 03: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 Mar 09 '15 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 Mar 10 '15 at 12:37

4 Answers4

11

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 -->
Sangrai
  • 687
  • 1
  • 6
  • 19
Tim Hallyburton
  • 2,741
  • 1
  • 21
  • 29
0

You could do

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

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

JFK
  • 40,963
  • 31
  • 133
  • 306
0

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

 $( document ).ready(function() {
        $( "li" ).click(function() {
            $( "#primary-menu" ).toggleClass( "active" );
        });
    });
shmuli
  • 5,086
  • 4
  • 32
  • 64
0

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?

Community
  • 1
  • 1
Sid
  • 189
  • 1
  • 4