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 .
3 answers
solution1
2 2016-04-20 08:37:13
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
solution2
1 2016-04-20 08:38:32
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>
solution3
0 2016-04-20 08:38:01
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.