Как изменить элементы DOM класса CSS динамически с помощью jquery

Я создал два шаблона в AngularJs соответственно home.html и navTemplate.html.Как изменить элементы DOM класса CSS динамически с помощью jquery

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>

Проблема заключалась в том, что это не добавит класс CSS в DOM элемента динамически, если используется ng-include .Please, дайте мне знать, как я могу добавить или удалить классы CSS динамически с ng-include.

источник

2016-04-20 gihan

вы пытались нг-класс? – thegio

http: // stackoverflow.com/questions/12295983/set-active-tab-style-with-angularjs – thegio

Если вы используете AngularJs, тогда нет необходимости добавлять код JQuery для добавления активного класса. Вы можете использовать ng-класс. Вы можете обратиться http://stackoverflow.com/questions/28084359/ng-class-condtionally-and-location-path-angular и http://stackoverflow.com/questions/26879892/adding-a-class-if-condition -matches-in-angle-js –

Вы можете использовать ng-class для динамического изменения вашего класса. Например

$scope.isActive = false; 


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

вы можете использовать его как <li id="home" ng-class="checkIfActive(isActive)">

это необходимо внутри контроллера вашего navTemplate

источник

2016-04-20 08:37:13

Я хотел бы предложить, чтобы сделать это таким образом:

Украсьте СЧА ссылки с классом, например «navLink».
Используйте этот скрипт, а не ваше:

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

Таким образом, вы получите JQuery часы для всех элементов из селектора «Ли a.navLink» внутри элемента # левой панели для нажмите события. Даже это добавлено динамически позже, так что вам больше не нужен документ.

Класс navLink не нужен, но лучше ограничить селектор определенной группой ссылок.

источник

2016-04-20 08:38:01

Каждый раз, когда одна из ссылок нажимается на панели навигации, она переходит непосредственно к URL-адресу, который снова загружает javascript, поэтому нет способа определить, какая ссылка была нажата после того, как вы хотите сделать что-то сложное, как получение href страницы. Лучше всего использовать маршрут angularjs, а затем добавить ng-клик к ссылкам на навигационной панели, будет вызывать функцию, которая принимает идентификатор щелкнутой ссылки, после чего вы можете установить активную ссылку на эту ссылку, у вас есть такая функция, как:

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

источник

2016-04-20 08:38:32

Как изменить элементы DOM класса CSS динамически с помощью jquery

ответ

Смежные вопросы