Tips for adding a CSS class to an HTML element on-the-fly

Question

Tips for adding a CSS class to an HTML element on-the-fly

As a newcomer to JavaScript and AngularJS, my question may be considered naive by some.

I am currently working on a tutorial project involving AngularJS.

Here is the HTML code snippet I am dealing with:

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

My goal is to make the <a> tag active when clicked (i.e., set the attribute class of the corresponding <li> element to active like in step1).

How can I achieve this programmatically on the client side?

javascript html css angularjs

Answer 1

Answer №1

Greetings Michael,

If you are utilizing Angular, it is recommended to employ the following syntax

<li ng-class="'yourclass': expression">

For further details, refer to the ngClass documentation

Feel free to explore this Codepen example

Answer 2

Greetings Michael,

If you are utilizing Angular, it is recommended to employ the following syntax

<li ng-class="'yourclass': expression">

For further details, refer to the ngClass documentation

Feel free to explore this Codepen example

Answer 3

Answer №2

To implement dynamic styling in AngularJS, you should utilize the ng-class directive along with data bindings.

For a code example, check out this JSFiddle: 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>

Answer 4

To implement dynamic styling in AngularJS, you should utilize the ng-class directive along with data bindings.

For a code example, check out this JSFiddle: 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>

Answer 5

Answer №3

To change the class of an element based on a controller variable, you can utilize the ngClass directive in AngularJS. For a practical example, take a look at this codepen demo.

Here's how you can apply this concept to your list item:

ng-class="{active: isClicked}"

and then in your anchor tag:

ng-click="isClicked = true"

Once clicked, the list item will dynamically change its class to "active" as defined by the CSS properties.

Answer 6

To change the class of an element based on a controller variable, you can utilize the ngClass directive in AngularJS. For a practical example, take a look at this codepen demo.

Here's how you can apply this concept to your list item:

ng-class="{active: isClicked}"

and then in your anchor tag:

ng-click="isClicked = true"

Once clicked, the list item will dynamically change its class to "active" as defined by the CSS properties.

Answer 7

Answer №4

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <link href="http://custom.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="http://jdoe.github.io/custom-theme/custom-style.css" rel="stylesheet"/>
    <link href="http://custom.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/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>

Answer 8

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <link href="http://custom.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="http://jdoe.github.io/custom-theme/custom-style.css" rel="stylesheet"/>
    <link href="http://custom.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/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>

Tips for adding a CSS class to an HTML element on-the-fly

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Adjust the menu scrollbar position to the right or limit scrolling to within the menu area

The accordion won't function properly if it is added using append() after the document is ready

Injecting CSS styles into dynamically inserted DOM elements

"Emulate the social sharing capabilities of CNET with interactive share

Trouble filling a List<WebElement> from a Table using Selenium Java

Using AngularJS ng-repeat to pass href links

What is the significance of the dollar sign prefix ($) in Vue.js?

Issues with the animation of letters bouncing in css3

Steer clear of downloading images while on your smartphone

Encountering a Module not found error with a ValidationError when trying to import an SVG file within a React

Converting dates in Javascript

The XML response from Ajax is returning as empty

How to choose an item from a dropdown list using its item number with jQuery

Incorporating JavaScript/jQuery values into C# backend with ASP.NET

Modify the behavior of the tab key using JavaScript

What is the best way to display data retrieved from a GET request in Angular?

The jspdf tool tries to cram my extensive data into a single page, resulting in an overcrowded and barely visible PDF document

Deactivate the dependent picklist functionality on a Visualforce page

Uniting the client-side jQuery and server-side Express for enhanced functionality

Click action: two functions, but only the first one seems to be functioning. Feeling frustrated