Remove attribute html in Jquery

Question

I have problem with remove the attribute class="active" in tag li.

I have 2 class in tag <li>.

One is: active,

another one is: dropdown

but i just want to remove the previous class="active" and add this to the tag <li> when I clicked it. But when I remove, the class="dropdown" also removed.

I know my code have problem but I dont know how to fix it.

Can anybody help me :)

Sorry, because my english not good :)

HTML

<ul class="nav nav-justified">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">Projects</a></li>
     <li><a href="#">Services</a></li>
     <li class="dropdown">
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              Dropdown
              <span class="caret"></span>
         </a>
         <ul class="dropdown-menu" role="menu">
             <li>Hoai Thy</li>
             <li>My Huyen</li>
         </ul>
     </li>
     <li><a href="#">About</a></li>
     <li><a href="#">Contact</a></li>
</ul>

Javascript

$(document).ready(function(){
$('.dropdown-toggle').dropdown()
    $(".nav-justified li").each(function(){
    $(this).click(function(){
        $(".nav-justified li").removeAttr();
        $(this).attr("class","active");
     });
   });
});

Adam · Accepted Answer · 2014-04-17 11:27:38Z

3

An answer based on toggleClass has claready been posted. Alterntivate is to remove and add classes as you are trying to do but in jQuery do that via removeClass and addClass, not via attr. There could be other (pure presentation) classes that you want to leave unaltered).

$(".nav-justified li").click(function(){
   $(".nav-justified li").removeClass('active');
   $(this).addClass("active");
});

Also, you don't need the .each() - .click(function(){}) binds the event to all elements in the collection

edited Apr 17, 2014 at 11:27

answered Apr 17, 2014 at 11:07

Adam

6,8124 gold badges45 silver badges72 bronze badges

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

1 Comment

Satpal Over a year ago

Its complete answer. +1 for proper event binding

Bhojendra Rauniyar · Accepted Answer · 2014-04-17 11:02:40Z

1

Use toggleClass() instead of removing attribute and adding the attribute again:

$(".nav-justified li").toggleClass('active');

And removeAttr() method won't remove the class name but it removes the whole attribute.

answered Apr 17, 2014 at 11:02

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Comments

Milind Anantwar · Accepted Answer · 2014-04-17 11:09:48Z

0

Use .removeClass() to remove class.also use .addClass() to add class active.Try this:

 $(this).click(function(){
    $(".nav-justified li.active").removeClass('active');
    $(this).addClass("active");
});

edited Apr 17, 2014 at 11:09

answered Apr 17, 2014 at 11:02

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

1 Comment

Adam Over a year ago

You should also use addClass() instead of attr() to set the class

Kaushal Khamar · Accepted Answer · 2014-04-17 11:15:10Z

0

This will Work for you.

    $(".nav-justified li").each(function(){
        $(this).toggleClass('active')
     });

answered Apr 17, 2014 at 11:15

Kaushal Khamar

2,1231 gold badge18 silver badges23 bronze badges

Collectives™ on Stack Overflow

Remove attribute html in Jquery

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related