How to add CSS class dynamically to html element


Tags: javascript,html,css,angularjs

Problem :

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.



Solution :

Michael,

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

ngClass documentation

Check out this Codepen


    CSS Howto..

    How to change background on hover for 2 elements using css

    How do I correct overlapping spacing error in CSS when it wraps text?

    How to display “a” to full of the line

    How to selectively pass mouse events to underlying svg elements

    How to make a vertical CSS menu with arrows on the right of each entry?

    how to align div's horizontally in CSS

    How can I convert a SASS file to a CSS file in an ANT task?

    how to have a div with two images in any of 9 possible positions

    CSS Clouds - How to adjust to inner content?

    CSS question how to make one div appear over another?

    How do I make :hover inside div style? [duplicate]

    How to align with digits inside to the right, jQuery

    How to style HTML paragraphs with CSS to prevent empty lines between them?

    How to change color of the selected item from a Xul listbox?

    How to use psd elements in an upload form? [closed]

    How to change tooltip style in jQuery vmap?

    How to convert a xml element into url using css?

    How to create column with two divs one fixed above second that hides behind first when scrolling?

    CSS how to change the color of a link within a class

    How do I override the default way Wordpress' determines the .current-menu-item class?

    How come one of my columns in bootstrap is not functioning properly?

    How put div element to bottom of another div element

    How to apply same event to multiple buttons?

    How to organise my web content?

    How to add a tooltip for just the background image of an input field with HTML and CSS

    How to tilt inner element forward when tilting outer back with css 3d transforms

    How to change a div top margin without leaving a white space?

    How to get relative CSS from photoshop artboard?

    How to search a particular text within an HTML Text and highlight the search string with a color

    How to create a absolute element overlapping several rows in a calendar (table) design?