如何将CSS类动态地添加到html元素

我是新来的Javascript和特别是angularJS所以也许我的问题似乎天真的一些。如何将CSS类动态地添加到html元素

我正在研究我的angularJS教程项目。

我有这样的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>

当我按下<a>标签，我需要将其激活（即设置属性类的<li>元素来活跃，因为它在显示步骤1）。

如何在客户端以编程方式实现它？

预先感谢您。

来源

2015-08-24 Michael

你可以发布你的angularjs控制器吗？ –

迈克尔，

如果你正在使用的角度，你应该使用<li ng-class="'yourclass': expression">

ngClass documentation

看看这个Codepen

来源

2015-08-24 16:55:43 bobleujr

-1


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

来源

2015-08-24 16:52:06 Mukaram

由于他使用的是angularjs，他应该可以通过数据绑定和ng-class来做到这一点。 –

我不想使用JQUERY – Michael

我认为对于java-script – Mukaram

可以使用ng class功能。这将允许用户根据控制器变量的值更改元素的类。看看这个codepen。

所以，你可以添加到您的李：

ng-class="{active: isClicked}"

，然后在你的一个：点击时

ng-click="isClicked = true"

然后，贵丽将采取的CSS类的属性“活动“

来源

2015-08-24 17:02:23

您需要使用ng-class和数据绑定

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>

来源

2015-08-24 17:07:03

的某些人来说很容易为什么要downvote？自圆其说。 –

这就是我，我的坏。我打算投票。 –

如何将CSS类动态地添加到html元素

回答

相关问题