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

【问题标题】：How to add CSS class dynamically to html element如何将 CSS 类动态添加到 html 元素
【发布时间】：2019-12-30 20:28:48
【问题描述】：

我是 JavaScript 新手，尤其是 AngularJS，所以也许我的问题对某些人来说似乎很幼稚。

我正在做我的 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 所示）。

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

【问题讨论】：

你能发布你的 angularjs 控制器吗？

标签： javascript html css angularjs

【解决方案1】：

迈克尔，

如果你使用 angular，你应该使用<li ng-class="'yourclass': expression">

ngClass documentation

看看这个Codepen

【讨论】：

【解决方案2】：

您需要使用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>

【讨论】：

【解决方案3】：

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

所以，你可以添加到你的 li:

ng-class="{active: isClicked}"

然后在你的 a:

ng-click="isClicked = true"

然后，当点击时，你的 li 将具有 css 类“活动”的属性

【讨论】：

【解决方案4】：



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

【讨论】：

由于他使用的是 angularjs，他可能应该通过数据绑定和 ng-class 来做到这一点。
我不想使用 JQUERY
我认为对于 java-script 新手来说会很容易