快捷導(dǎo)航

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

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

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

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

AngularJS相比原生的js或者jquery有著很大不同，對(duì)于一個(gè)簡(jiǎn)單的鼠標(biāo)點(diǎn)擊不同選項(xiàng)，動(dòng)態(tài)切換樣式該怎么實(shí)現(xiàn)呢。

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

Ok.，實(shí)現(xiàn)過(guò)程

1. html代碼

<!--推薦或熱點(diǎn)標(biāo)題-->
<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}">熱點(diǎn)</a>
  </div>
</div>

2. 控制器代碼

.controller('newsCtrl', function($scope) {
  //定義要聚焦的索引
  $scope.focusIndex=0; //默認(rèn)顯示推薦板塊
  $scope.recHide = false;
  $scope.hotHide = true;
  $scope.titleClick = function(index){
    $scope.focusIndex=index; //點(diǎn)擊切換樣式
    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. 好了，在瀏覽器運(yùn)行試試，放心，沒(méi)錯(cuò)的！

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

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

您可能感興趣的文章:

相關(guān)文章

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