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=".1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href=".css" rel="stylesheet"/>
<link href=".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>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./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./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?
Share Improve this question edited Dec 30, 2019 at 12:28 halfer 20.5k19 gold badges109 silver badges202 bronze badges asked Aug 24, 2015 at 16:44 MichaelMichael 13.6k59 gold badges170 silver badges315 bronze badges 1- Can you post your angularjs controller? – David Zech Commented Aug 24, 2015 at 16:49
4 Answers
Reset to default 7Michael,
if you are using angular, you should use <li ng-class="'yourclass': expression">
ngClass documentation
Check out this Codepen
You'll want to use ng-class and data bindings
https://jsfiddle/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>
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"
<link href="http://netdna.bootstrapcdn./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./bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./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>