Question

我分别在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。 / p>

在home.html内

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

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

Answer 1

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

$scope.isActive = false;


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

您可以像<li id="home" ng-class="checkIfActive(isActive)">

一样使用它

这需要在navTemplate的控制器内

Answer 2

每次在导航栏中单击其中一个链接时，它会直接导航到再次重新加载javascript的网址，因此无法确定之后点击了哪个链接，除非您想要做一些复杂的事情，比如获取页面的href。最好的办法是使用angularjs路由，然后在导航栏上的链接上添加一个ng-click，将调用一个函数，该函数接收点击链接的Id，然后你可以将其设置为该链接，你将拥有如下函数： / p>

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

Answer 3

我建议这样做：

使用类来装饰您的导航链接，例如＆＃34; navLink＆＃34;。
使用此脚本代替您的脚本：

boundingrect.tl()

通过这种方式，您将获得来自＆＃34; li a.navLink＆＃34;的所有元素的jQuery监视。用于点击事件的＃left-panel元素内的选择器。即使你以后动态添加，所以你不再需要该文件了。

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

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

3 个答案: