AngularJS實現(xiàn)動態(tài)切換樣式的方法分析

更新時間：2018年06月26日 11:55:50 作者：ChauncyWu

這篇文章主要介紹了AngularJS實現(xiàn)動態(tài)切換樣式的方法,結(jié)合實例形式分析了AngularJS事件響應(yīng)與樣式動態(tài)控制相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了AngularJS實現(xiàn)動態(tài)切換樣式的方法。分享給大家供大家參考，具體如下：

AngularJS相比原生的js或者jquery有著很大不同，對于一個簡單的鼠標點擊不同選項，動態(tài)切換樣式該怎么實現(xiàn)呢。

本文實現(xiàn)的是點擊某個標題，標題字體加粗，并隨之切換相應(yīng)的div內(nèi)容，如下（點擊推薦或熱點）

Ok.，實現(xiàn)過程

1. html代碼

<!--推薦或熱點標題-->
<div class="comTitStyle">
  <div>
    <a ng-click="titleClick(0)" ng-class="{'selected':focusIndex==0}" class="selected">推薦</a>
  </div>
  <div>
    <a ng-click="titleClick(1)" ng-class="{'selected':focusIndex==1}">熱點</a>
  </div>
</div>

2. 控制器代碼

.controller('newsCtrl', function($scope) {
  //定義要聚焦的索引
  $scope.focusIndex=0; //默認顯示推薦板塊
  $scope.recHide = false;
  $scope.hotHide = true;
  $scope.titleClick = function(index){
    $scope.focusIndex=index; //點擊切換樣式
    if(index == 0){
      $scope.recHide = false;
      $scope.hotHide = true;
    }else if(index == 1){
      $scope.recHide = true;
      $scope.hotHide = false;
    }
  }
})

3. 附上包括.selected在內(nèi)的CSS樣式

.comTitStyle{
  width: 16rem;
  height: 2rem;
}
.comTitStyle > div{
  display: inline-block;
  width: 7.9rem;
  height: 2rem;
  vertical-align: middle;
  text-align: center;
  line-height: 2rem;
}
.comTitStyle > div > a{
  width: 2.5rem;
  height: 1.9rem;
  display: inline-block;
  vertical-align: middle;
  font-size: .8rem;
  color: #666666;
}
.comTitStyle > div > .selected{
  border-bottom: 1px solid #3BB4C1;
  font-weight: bold;
}

4. 好了，在瀏覽器運行試試，放心，沒錯的！

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

AngularJS實用開發(fā)技巧(推薦)
Angular JS 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。接下來通過本文給大家介紹AngularJS實用開發(fā)技巧的相關(guān)資料,需要的朋友可以參考下
2016-07-07
淺談關(guān)于angularJs中使用$.ajax的注意點
本篇文章主要介紹了關(guān)于angularJs中使用$.ajax的注意點，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
Angular.js中用ng-repeat-start實現(xiàn)自定義顯示
大家都知道Angular.js可以用ng-repeat來顯示列表數(shù)據(jù)，可是如果想要自定義顯示數(shù)據(jù)列表的話ng-repeat就實現(xiàn)不了了，這個時候可以利用ng-repeat-start 和 ng-repeat-end來實現(xiàn)，下面通過本文來詳細看看實現(xiàn)的方法吧。
2016-10-10
如何利用AngularJS打造一款簡單Web應(yīng)用
如果大家希望在應(yīng)用程序的創(chuàng)建工作中采取各類最佳實踐，那么AngularJS也能夠帶來極大的助益?？偠灾@套框架的強大功能與特性永遠不會讓有著應(yīng)用開發(fā)需求的朋友們失望
2015-12-12
AngularJS實現(xiàn)圖片上傳和預(yù)覽功能的方法分析
這篇文章主要介紹了AngularJS實現(xiàn)圖片上傳和預(yù)覽功能的方法,結(jié)合HTML5實例形式對比分析了AngularJS圖片上傳的相關(guān)操作技巧與注意事項,需要的朋友可以參考下
2017-11-11
angularjs點擊圖片放大實現(xiàn)上傳圖片預(yù)覽
這篇文章主要為大家詳細介紹了angularjs點擊圖片放大實現(xiàn)上傳圖片預(yù)覽的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
Angular.js通過自定義指令directive實現(xiàn)滑塊滑動效果
這篇文章主要給大家介紹了關(guān)于Angular.js如何通過自定義指令directive實現(xiàn)滑塊滑動的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用angularjs具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
2017-10-10
AngularJS入門教程之與服務(wù)器(Ajax)交互操作示例【附完整demo源碼下載】
這篇文章主要介紹了AngularJS與服務(wù)器Ajax交互操作的方法,可實現(xiàn)post傳輸數(shù)據(jù)的功能,并附帶完整的demo源碼供讀者下載參考,源碼中還包含了前面章節(jié)的示例文件,需要的朋友可以參考下
2016-11-11
詳解Angular操作cookies方法
這篇文章主要介紹了詳解Angular操作cookies方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
angularJs中跳轉(zhuǎn)到指定的錨點實例($anchorScroll)
今天小編就為大家分享一篇angularJs中跳轉(zhuǎn)到指定的錨點實例($anchorScroll)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08