Michael Michael - 1 year ago 88
Javascript Question

How to add CSS class dynamically to html element

I am new to the Javascript and especially to angularJS so maybe my question wil 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"/>
<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>

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

How can I implement it programmatically in client side?

Thank you in advance.

Answer Source


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

ngClass documentation

Check out this Codepen

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download