如何使用jquery动态更改DOM元素CSS类

How to change DOM elements CSS class dynamically using jquery

本文关键字：DOM 元素 CSS 何使用 jquery 动态      更新时间：2023-09-26

我在AngularJs中创建了两个模板，分别是home.html和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>

我的要求是，当页面导航到导航面板中的home.html时，应该将主页更新为当前页面。（add class="active"）。要做到这一点，我必须在home.html中添加一个脚本。

Inside home.html

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

问题是，如果使用ng-include，就不会将CSS类动态添加到DOM元素中。请告诉我如何使用ng-include动态添加或删除CSS类。

您可以使用ng-class动态更改类。例如

$scope.isActive = false;

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

你可以像<li id="home" ng-class="checkIfActive(isActive)"> 一样使用它

这是在navTemplate 的控制器内需要的

每次在导航栏中单击其中一个链接时，它都会直接导航到url，url会再次重新加载javascript，因此无法确定在单击后单击了哪个链接，除非你想做一些复杂的事情，比如获取页面的href。最好的方法是使用angularjs路线，然后在导航栏上的链接上添加一个ng点击。它将调用一个函数，该函数接受点击链接的Id。然后，你可以将该链接设置为活动链接。你会有一个类似的函数：

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

你的html将看起来像：

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

我建议这样做：

  1. 用类来装饰你的导航链接，比如"navLink"

  2. 使用此脚本而不是您的脚本：

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

通过这种方式，您将从点击事件的#left面板元素中的"lia.navLink"选择器中获得所有元素的jQuery监视。即使是后来动态添加的，所以你不再需要文档了。准备好了。

navLink类不是必需的，但最好将选择器限制为某一组链接。

相关文章：