How to add CSS class dynamically to html element

Question

I am new to JavaScript and especially to AngularJS so maybe my question will seem naive to some.

I am working on my AngularJS tutorial project.

I have this HTML rows:

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://acornejo.github.io/bootstrap-nav-wizard/bootstrap-nav-wizard.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
  <ul class="nav nav-wizard">
    <li class="active"><a href="#">Step1</a></li>
    <li><a href="#">Step2</a></li>
    <li><a href="#">Step3</a></li>
  </ul>
  <hr>
</div>
</body>

When I press on <a> tag I need to make it active (i.e. to set attribute class of the <li> element to active as it showed in step1).

How can I implement it programmatically in client side?

Can you post your angularjs controller?

David Zech
– David Zech

2015-08-24 16:49:50 +00:00
Commented Aug 24, 2015 at 16:49 — David Zech
– David Zech, Commented Aug 24, 2015 at 16:49

bobleujr · Accepted Answer · 2016-07-12 22:48:38Z

7

Michael,

if you are using angular, you should use <li ng-class="'yourclass': expression">

ngClass documentation

Check out this Codepen

edited Jul 12, 2016 at 22:48

answered Aug 24, 2015 at 16:55

bobleujr

1,1741 gold badge10 silver badges24 bronze badges

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

Comments

David Zech · Accepted Answer · 2015-08-24 17:16:08Z

5

You'll want to use ng-class and data bindings

https://jsfiddle.net/bdLwrs1p/

    <li ng-class="{active: active == 1}" ><a href="#" ng-click="active = 1" ng-init="active = 1">Step1</a></li>
    <li ng-class="{active: active == 2}" ><a href="#" ng-click="active = 2" >Step2</a></li>
    <li ng-class="{active: active == 3}" ><a href="#" ng-click="active = 3">Step3</a></li>

edited Aug 24, 2015 at 17:16

answered Aug 24, 2015 at 17:07

David Zech

7553 silver badges14 bronze badges

Comments

Jacob Petersen · Accepted Answer · 2015-08-24 17:21:13Z

3

You can use the ng class feature. This will let use change the class of an element based on the value of a controller variable. Check out this codepen.

So, you could add to your li:

ng-class="{active: isClicked}"

and then in your a:

ng-click="isClicked = true"

Then when clicked, your li would take on the properties of the css class "active"

edited Aug 24, 2015 at 17:21

answered Aug 24, 2015 at 17:02

Jacob Petersen

1,4531 gold badge9 silver badges17 bronze badges

Comments

Mukaram · Accepted Answer · 2015-08-24 16:52:06Z

-1



    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="http://acornejo.github.io/bootstrap-nav-wizard/bootstrap-nav-wizard.css" rel="stylesheet"/>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <body>
    <div class="container">
      <ul class="nav nav-wizard">
        <li class="active"><a href="#">Step1</a></li>
        <li><a href="#">Step2</a></li>
        <li><a href="#">Step3</a></li>
      </ul>
      <hr>
    </div>
    </body>
<script type="text/javascript">
$('a').click(function(){
    $('li').each(function(){
       $(this).removeClass('active'); 
    });
$(this).closest('li').addClass('active');
});
</script>

answered Aug 24, 2015 at 16:52

Mukaram

1051 silver badge3 bronze badges

3 Comments

David Zech Over a year ago

Since he's using angularjs, he should probably do this via data bindings and ng-class.

Michael Over a year ago

I don't want to use JQUERY

Mukaram Over a year ago

i thought it would be easy for some one who is new to java-script

Collectives™ on Stack Overflow

How to add CSS class dynamically to html element

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related