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 .

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 stackoverflow.com/questions/28084359/… and stackoverflow.com/questions/26879892/… — Shivek Parmar
– Shivek Parmar, Commented Apr 20, 2016 at 8:33

arci gaming · Accepted Answer · 2016-04-20 08:37:13Z

2

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

answered Apr 20, 2016 at 8:37

arci gaming

392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ayo K · Accepted Answer · 2016-04-20 08:38:32Z

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 · Accepted Answer · 2016-04-20 08:46:09Z

0

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.

edited Apr 20, 2016 at 8:46

answered Apr 20, 2016 at 8:38

Tomasz Bednarek

112 bronze badges

Collectives™ on Stack Overflow

How to change DOM elements CSS class dynamically using jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related