如何将 CSS 类动态添加到 html 元素
[英]How to add CSS class dynamically to html element
问题描述
I am new to JavaScript and especially to AngularJS so maybe my question will seem naive to some.
我是 JavaScript 的新手，尤其是 AngularJS，所以也许我的问题对某些人来说似乎很幼稚。
I am working on my AngularJS tutorial project.我正在处理我的 AngularJS 教程项目。
I have this HTML rows:我有这个 HTML 行：
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <link href="http://acornejo.github.io/bootstrap-nav-wizard/bootstrap-nav-wizard.css" rel="stylesheet"/> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <body> <div class="container"> <ul class="nav nav-wizard"> <li class="active"><a href="#">Step1</a></li> <li><a href="#">Step2</a></li> <li><a href="#">Step3</a></li> </ul> <hr> </div> </body>
When I press on <a> tag I need to make it active (ie to set attribute class of the <li> element to active as it showed in step1).当我按下<a>标签时，我需要使其处于活动状态（即将<li>元素的属性类设置为活动状态，如步骤 1 所示）。
How can I implement it programmatically in client side?如何在客户端以编程方式实现它？
4 个解决方案
解决方案1
7 已采纳 2015-08-24 16:55:43
Michael,迈克尔，
if you are using angular, you should use <li ng-class="'yourclass': expression">如果你使用 angular，你应该使用<li ng-class="'yourclass': expression">
解决方案2
5 2015-08-24 17:07:03
You'll want to use ng-class and data bindings你会想要使用ng-class和数据绑定
https://jsfiddle.net/bdLwrs1p/ https://jsfiddle.net/bdLwrs1p/
<li ng-class="{active: active == 1}" ><a href="#" ng-click="active = 1" ng-init="active = 1">Step1</a></li>
<li ng-class="{active: active == 2}" ><a href="#" ng-click="active = 2" >Step2</a></li>
<li ng-class="{active: active == 3}" ><a href="#" ng-click="active = 3">Step3</a></li>
解决方案3
3 2015-08-24 17:02:23
You can use the ng class feature.您可以使用ng 类功能。 This will let use change the class of an element based on the value of a controller variable.这将让用户根据控制器变量的值更改元素的类。 Check out this codepen .看看这个代码笔。
So, you could add to your li:所以，你可以添加到你的 li：
ng-class="{active: isClicked}"
and then in your a:然后在你的一个：
ng-click="isClicked = true"
Then when clicked, your li would take on the properties of the css class "active"然后单击时，您的 li 将采用 css 类“活动”的属性
解决方案4
-1 2015-08-24 16:52:06
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://acornejo.github.io/bootstrap-nav-wizard/bootstrap-nav-wizard.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>
<div class="container">
<ul class="nav nav-wizard">
<li class="active"><a href="#">Step1</a></li>
<li><a href="#">Step2</a></li>
<li><a href="#">Step3</a></li>
</ul>
<hr>
</div>
</body>
<script type="text/javascript">
$('a').click(function(){
$('li').each(function(){
$(this).removeClass('active');
});
$(this).closest('li').addClass('active');
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.