如何將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元素

回答

相關問題