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

【问题标题】：How to change DOM elements CSS class dynamically using jquery如何使用 jquery 动态更改 DOM 元素 CSS 类
【发布时间】：2016-08-12 18:45:55
【问题描述】：

我在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 时，应将主页更新为当前页面。（添加 class="active"）。为此，我已将脚本添加到 home.html 中。

在 home.html 中

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

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

【问题讨论】：

你尝试过 ng-class 吗？
stackoverflow.com/questions/12295983/…
如果您使用的是AngularJs，则无需添加Jquery 代码来添加活动类。您可以使用 ng-class。可以参考stackoverflow.com/questions/28084359/…和stackoverflow.com/questions/26879892/…
@thegio 我尝试使用ng-class，但 css 无法正常工作。

标签： javascript jquery angularjs

【解决方案1】：

我建议这样做：

使用类装饰导航链接，例如“navLink”。
用这个脚本代替你的：

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

通过这种方式，您将从#left-panel 元素中的“li a.navLink”选择器中获取所有元素的 jQuery 监视，用于单击事件。即使是稍后动态添加的，所以您不再需要 document.ready。

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

【讨论】：

【解决方案2】：

每次在导航栏中单击其中一个链接时，它都会直接导航到重新加载 javascript 的 url，因此无法确定单击了哪个链接，除非您想做一些复杂的操作，例如获取页面的href。最好的办法是使用 angularjs 路由，然后在导航栏上的链接上添加一个 ng-click 将调用一个函数，该函数接受所单击链接的 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>

【讨论】：

【解决方案3】：

您可以使用ng-class 来动态更改您的班级。例如

$scope.isActive = false;


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

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

这是在您的 navTemplate 的控制器中需要的

【讨论】：