CODEWITHSUNDEEP
javascripthtmlcssangularjs
Michael
Michael

Reputation: 13616

How to add CSS class dynamically to html element

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?

Upvotes: 2

Views: 1506

Answers (4)

bobleujr
bobleujr

Reputation: 1176

Michael,

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

ngClass documentation

Check out this Codepen

Upvotes: 7

Jacob Petersen
Jacob Petersen

Reputation: 1453

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"

Upvotes: 3

David Zech
David Zech

Reputation: 755

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>

Upvotes: 5

Mukaram
Mukaram

Reputation: 105





    <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>

Upvotes: -1

Related Questions