Question

我是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中所示。）< / p>

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

提前谢谢。

Answer 1

迈克尔，

如果您使用角度，则应使用<li ng-class="'yourclass': expression">

ngClass documentation

查看此Codepen

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

Answer 3

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

所以，你可以加入你的李：

ng-class="{active: isClicked}"

然后在你的a：

ng-click="isClicked = true"

然后点击后，你的李将采用css类的属性＆＃34;活跃＆＃34;

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

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

4 个答案: