Jquery on click function add class to a specific div

Question

I have the code html

<div class="mobile"></div>
    <ul id="nav">
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="work.php">Work</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</div>

I need to: On click add class to the ul

<div class="mobile"></div>
    <ul id="nav" class="visible">
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="work.php">Work</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</div>

I've tried:

jQuery(document).ready(function() {
    jQuery('.mobile').click(function(){
        jQuery('#nav').removeClass('selected')
        jQuery('#nav').addClass('selected');
    });
});

When I click the first time the js add the class selected as I want; but when I click again it does nothing, it should remove that class, but it doesn't work. How can I do this?

Does anyone know the answer to this?

Just a note: jQuery('#nav').removeClass('selected') is missing a ; in the end of the line. — kontur
– kontur, Commented Jan 30, 2013 at 11:58

Jai · Accepted Answer · 2013-01-30 11:41:28Z

1

use toggleClass():

jQuery(document).ready(function() {
    jQuery('.mobile').click(function(){
         jQuery('#nav').toggleClass('selected');
    });
});

Although its not clear to me you want visible class or selected class.

answered Jan 30, 2013 at 11:41

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Laky · Accepted Answer · 2013-01-30 11:41:37Z

1

What you do in your code is that everytime you click you remove and add the class. Hence it stays added after the first click. You can do this to get the desired behaviour:

$(document).ready(function() {
    $('.mobile').click(function(){
        $('#nav').toggleClass('selected');
    });
});

answered Jan 30, 2013 at 11:41

Laky

1,0651 gold badge7 silver badges18 bronze badges

Comments

Sai Varadula · Accepted Answer · 2013-05-06 06:44:29Z

0

What do you want actually. If you want to add the class, on clicking for more than one time, the class gets adding. If you want to add if the class is not added and remove if the class is already added for the each click then the below code should work.

$('.mobile').click(function() {
   $('#nav').toggleClass('selected');
});

answered May 6, 2013 at 6:44

Sai Varadula

1031 silver badge3 bronze badges

Collectives™ on Stack Overflow

Jquery on click function add class to a specific div

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related