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?
Michael,
if you are using angular, you should use <li ng-class="'yourclass': expression">
Check out this Codepen
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments