How to change css class from javascript?

Question

Suppose I want to dynamically via javascript or jquery change the class of the following to class="active" How do I achieve it?

<!-- Navigator -->
<div style="position: abolute; top: 50px" class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <ul id="yw0" class="nav">
                <li class="active"><a href="#" style="color: black">Company</a></li>
                <li><a href="#" style="color: black" class="link"><i class="fa fa-lightbulb-o"></i>&nbspFAQs</a></li>
                <li><a href="#" style="color: black" class="link"><i class="fa fa-question-circle"></i>&nbspHelp Center</a></li>
                <li><a href="#" style="color: black"><i class="fa fa-newspaper-o"></i>&nbspPress</a></li>
                <li><a href="#" style="color: black">Careers</a></li>
                <li><a href="#" style="color: black" href="#"><i class="fa fa-envelope-o"></i>&nbspContact Us</a></li>
            </ul>
        </div>
    </div>
</div>

I want to actually know how can I change the class of the li tag?

<li class="active">

I know that there is a method that I can use http://api.jquery.com/addclass/ But how do I do it with my example above.

Which `li` tag, and under what event do you want this to happen? — Rory McCrossan, Jan 07 '15 at 11:57
every element has a className attribute. so, document,getElementById("someID").className = "new class"; — TechGirl, Jan 07 '15 at 11:58
There is good explanation of this [here](http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript) — robjez, Jan 07 '15 at 11:59
This [post](http://stackoverflow.com/a/196038/1560199) should be able to answer all your questions. — n00bstacker, Jan 07 '15 at 12:00

score 1 · Answer 1 · answered Jan 07 '15 at 12:22

For Adding class in any HTML Element

$("#id_of_element, .class_of_element, directly_name_of_element").addClass('active');

For Removing class from any HTML Element

$("#id_of_element, .class_of_element, directly_name_of_element").removeClass('active');

score 0 · Answer 2 · answered Jan 07 '15 at 11:59

0

http://api.jquery.com/addclass/

In JQuery.

 $("li").addClass("active");

You will need a better selector for getting the li you require.

answered Jan 07 '15 at 11:59

Bobby

2,830
3
19
36

score 0 · Answer 3 · answered Jan 07 '15 at 11:59

$("li").addClass("active");

And in your CSS just have

.active {
    background: red;
}

Although your best bet is to know which is active and just append that class to the li tag on the respective page, assuming you're talking about navigation: for example, on your help-center.html, just add

 <li class="active"> rather than <li>

score 0 · Answer 4 · answered Jan 07 '15 at 11:59

You can add classes easily with jquery using add class, and remove with, yep you guessed it, remove class

If you want to change a class, simple remove the old one and add the new

$('#something').removeClass.('oldClass').addClass('newClass');

N.b. links are to jquery docs

score 0 · Answer 5 · edited Jan 07 '15 at 12:28

0

Below code will add the class to the last li..

$(document.ready(function() {
     $('.container li:last-child').addClass('active');
});

edited Jan 07 '15 at 12:28

pronebird

12,068
5
54
82

answered Jan 07 '15 at 12:01

user3040610

750
4
15

score 0 · Accepted Answer · answered Jan 07 '15 at 12:13

If i understand your expected behaviour, you could delegate event to UL element for using following logic on LI click:

$("#yw0").on('click', 'li:not(.active)', function () {
    $(this).add('li.active').toggleClass('active');
});

-DEMO-

$(function () {
    $("#yw0").on('click', 'li:not(.active)', function () {
        $(this).add('li.active').toggleClass('active');
    });
});

li.active {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="position: abolute; top: 50px" class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <ul id="yw0" class="nav">
                <li class="active"><a href="#" style="color: black">Company</a>
                </li>
                <li><a href="#" style="color: black" class="link"><i class="fa fa-lightbulb-o"></i>&nbspFAQs</a>
                </li>
                <li><a href="#" style="color: black" class="link"><i class="fa fa-question-circle"></i>&nbspHelp Center</a>
                </li>
                <li><a href="#" style="color: black"><i class="fa fa-newspaper-o"></i>&nbspPress</a>
                </li>
                <li><a href="#" style="color: black">Careers</a>
                </li>
                <li><a href="#" style="color: black" href="#"><i class="fa fa-envelope-o"></i>&nbspContact Us</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Yes this is exactly what I wanted.. however I tried the snippet in my code.. the onclick function doesnot call but yes thanks for help — Sachy, Jan 07 '15 at 12:43

score -2 · Answer 7 · answered Jan 07 '15 at 12:00

-2

To select an item by class:

$('.active').addClass('.non-active');
$('.active').removeClass('.active');

To select an item by type:

$('li').addClass('.non-active');
$('ii').removeClass('.active');

To select an item by id:

$('#some_id').addClass('.non-active');
$('#some_id').removeClass('.active');

answered Jan 07 '15 at 12:00

terary

940
13
30

2

Remove the dots. When you call `addClass` or `removeClass`, you just write `$(...).addClass('active');`. And if you want to make it shorter, you can also write `$(...).toggleClass('active non-active');` – Magus Jan 07 '15 at 12:06
3

I wasn't sure about toggle class, the example jquery's site gives made it seem a little more confusing for someone who is asking a question like this. Do you thing $(...).addClass('someclass').removeClass('newclasss); would work? – terary Jan 07 '15 at 12:09

How to change css class from javascript?

7 Answers7

-DEMO-