Michael Michael - 4 months ago 9
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"/>
<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?

Thank you in advance.

Answer

Michael,

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

ngClass documentation

Check out this Codepen

Comments