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中用post方法時后臺拿不到值的問題
今天小編就為大家分享一篇快速解決angularJS中用post方法時后臺拿不到值的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Angularjs中的ui-bootstrap的使用教程
這篇文章主要介紹了Angularjs中的ui-bootstrap的使用教程,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-02-02
Angular4開發(fā)解決跨域問題詳解
本篇文章主要介紹了Angular4開發(fā)解決跨域問題詳解。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
AngularJS入門教程二：在路由中傳遞參數(shù)的方法分析
這篇文章主要介紹了AngularJS在路由中傳遞參數(shù)的方法,結(jié)合實例形式分析了AngularJS實現(xiàn)路由中傳遞參數(shù)的相關(guān)技巧,并總結(jié)了相關(guān)操作步驟與注意事項,需要的朋友可以參考下
2017-05-05
AngularJS 實現(xiàn)按需異步加載實例代碼
這篇文章主要介紹了AngularJS 實現(xiàn)按需異步加載實例代碼的相關(guān)資料,需要的朋友可以參考下
2015-10-10
Angular 4中如何顯示內(nèi)容的CSS樣式示例代碼
這篇文章主要給大家介紹了關(guān)于Angular 4中如何顯示內(nèi)容的CSS樣式的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-11-11
AngularJS使用帶屬性值的ng-app指令實現(xiàn)自定義模塊自動加載的方法
這篇文章主要介紹了AngularJS使用帶屬性值的ng-app指令實現(xiàn)自定義模塊自動加載的方法,結(jié)合實例形式分析了ng-app自動加載我們自定義的模塊作為根模塊的操作步驟與實現(xiàn)技巧,需要的朋友可以參考下
2017-01-01
BootStrap+Angularjs+NgDialog實現(xiàn)模式對話框
在完成一個后臺管理系統(tǒng)時，需要用表格顯示注冊用戶的信息。但是用戶地址太長了，不好顯示。所以想做一個模式對話框，點擊詳細地址按鈕時，彈出對話框，顯示地址。下面小編給大家分享下實現(xiàn)方法，一起看下吧
2016-08-08
AngularJS實現(xiàn)的輸入框字數(shù)限制提醒功能示例
這篇文章主要介紹了AngularJS實現(xiàn)的輸入框字數(shù)限制提醒功能,涉及AngularJS事件監(jiān)聽與元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2017-10-10
詳解angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套
這篇文章主要介紹了詳解angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04