CODEWITHSUNDEEP
jquerynavigationaddclassremoveclass
Panaroma
Panaroma

Reputation: 113

jquery add remove class onclick

i have any navigation menu !

   <div class="nav">
    <ul class="navigation">
    <li class="selected"><a href="#">HOME</a></li>
    <li><a href="#">PROFILE></a></li>
    <li><a href="#">CONTACTUS</a></li>
    <li><a href="#">ABOATUS</a></li>
    </ul>
    </div>

Now how to add selected class after click to any ( profile, Contactus, aboutus ) and remove selected home using Jquery.

Thanks

Upvotes: 11

Views: 39956

Answers (3)

David Thomas
David Thomas

Reputation: 253506

On the assumption that you want to have only one element of class-name selected I suggest:

$('ul.navigation li a').click(
    function(e) {
        e.preventDefault(); // prevent the default action
        e.stopPropagation(); // stop the click from bubbling
        $(this).closest('ul').find('.selected').removeClass('selected');
        $(this).parent().addClass('selected');
    });

JS Fiddle demo.

Upvotes: 14

Baz1nga
Baz1nga

Reputation: 15579

$("a").click(function()
{
  $("a").parent().removeClass("selected");

  $(this).parent().addClass("selected");
});

Live Demo

Upvotes: 4

Headshota
Headshota

Reputation: 21449

you can use toggleClass:

$("#myElement1").click(function(){
   $("#myElement2").toggleClass("myClass");
});

Upvotes: 8

Related Questions