How to change DOM elements CSS class dynamically using jquery

Question

I have created two templates in AngularJs respectively home.html and navTemplate.html.

home.html

<html>
<head>//necessary files goes here</head>
<body ng-app="myApp">
 //include navTemplate using ng-include 
<ng-include src="'navTemplate.html'"></ng-include>
</body>
</html>

navTemplate.html

<aside id="left-panel">
<nav>
<ul>
<li id="home">
<a href="home.html"><span>Home</span></a>
</li>

<li id="contact" class="active">
<a href="contact.html"><span>Contact</span></a>
</li>

</ul>
</nav>

</aside>

My requirement is that when page is navigated to home.html in nav panel should be updated home as a current page.(add class="active").To do that i have add a script into home.html.

Inside home.html

<script>
$(document).ready(function(){
$("#home").addClass("active");});
</script>

The problem was that this wouldn't add the CSS class into DOM element dynamically if used ng-include.Please let me know how can i add or remove CSS classes dynamically with ng-include .

http://stackoverflow.com/questions/12295983/set-active-tab-style-with-angularjs — thegio, Apr 20 '16 at 08:32
If you are using AngularJs then there is no need to add Jquery code to add the active class. You can use ng-class. You can refer http://stackoverflow.com/questions/28084359/ng-class-condtionally-and-location-path-angular and http://stackoverflow.com/questions/26879892/adding-a-class-if-condition-matches-in-angular-js — Shivek Parmar, Apr 20 '16 at 08:33

score 2 · Answer 1 · answered Apr 20 '16 at 08:37

You can use ng-class to dynamically change your class. For example

$scope.isActive = false;


$scope.checkIfActive = function(isActive) {
    if (isActive) {
        return "active"
    }
    return "not-active"
}

you can use it like <li id="home" ng-class="checkIfActive(isActive)">

this is needed inside the controller of your navTemplate

score 1 · Answer 2 · answered Apr 20 '16 at 08:38

each time one of the links is/are clicked in the nav bar it navigated directly to the url which reloads the javascript again, so there's no way to determine which link was clicked after except you want to do someting complicated like getting the href of the page. The best to do is use angularjs route then add an ng-click to the links on the nav bar will will call a function that takes in the Id of the clicked link you can then set active to that link youll have a function like:

$scope.activeLink = function(id){
 $("#"+id+" a").addClass("active");
};

you html will then look like:

<li id="home">
  <a href="#home" ng-click="activeLink('home')"><span>Home</span></a>
</li>
<li id="contact" class="active">
   <a href="#contact" ng-click="activeLink('contact')"><span>Contact</span</a>
</li>

Tomasz Bednarek · Answer 3 · 2016-04-20T08:46:09.907

I would suggest to do it this way:

Decorate your nav links with a class, like "navLink".
Use this script instead of yours:

<script> $("#left-panel").on("click", function(e) { $("#left-panel ul li").removeClass("active"); $(this).parent().addClass("active"); }, "li a.navLink"); </script>

This way you will get jQuery watch for all elements from the "li a.navLink" selector within the #left-panel element for click events. Even thos added dynamically later, so you don't need the document.ready anymore.

The navLink class is not necessary, but it's better to limit the selector to a certain group of links.

How to change DOM elements CSS class dynamically using jquery

3 Answers3