AngularJS實(shí)現(xiàn)動(dòng)態(tài)切換樣式的方法分析
本文實(shí)例講述了AngularJS實(shí)現(xiàn)動(dòng)態(tài)切換樣式的方法。分享給大家供大家參考，具體如下：
AngularJS相比原生的js或者jquery有著很大不同，對于一個(gè)簡單的鼠標(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)過程
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)行試試，放心，沒錯(cuò)的！
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。
- AngularJS標(biāo)簽頁tab選項(xiàng)卡切換功能經(jīng)典實(shí)例詳解
- 詳解AngularJS ng-class樣式切換
- angularJs的ng-class切換class
- 使用AngularJS2中的指令實(shí)現(xiàn)按鈕的切換效果
- AngularJS路由切換實(shí)現(xiàn)方法分析
- AngularJS實(shí)現(xiàn)使用路由切換視圖的方法
- AngularJS入門教程之多視圖切換用法示例
- 用AngularJS的指令實(shí)現(xiàn)tabs切換效果
- 使用AngularJS實(shí)現(xiàn)可伸縮的頁面切換的方法
- angularjs實(shí)現(xiàn)Tab欄切換效果
相關(guān)文章
快速解決angularJS中用post方法時(shí)后臺拿不到值的問題
今天小編就為大家分享一篇快速解決angularJS中用post方法時(shí)后臺拿不到值的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Angularjs中的ui-bootstrap的使用教程,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
本篇文章主要介紹了Angular4開發(fā)解決跨域問題詳解。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
AngularJS入門教程二：在路由中傳遞參數(shù)的方法分析
這篇文章主要介紹了AngularJS在路由中傳遞參數(shù)的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)路由中傳遞參數(shù)的相關(guān)技巧,并總結(jié)了相關(guān)操作步驟與注意事項(xiàng),需要的朋友可以參考下2017-05-05
AngularJS 實(shí)現(xiàn)按需異步加載實(shí)例代碼
這篇文章主要介紹了AngularJS 實(shí)現(xiàn)按需異步加載實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2015-10-10
Angular 4中如何顯示內(nèi)容的CSS樣式示例代碼
這篇文章主要給大家介紹了關(guān)于Angular 4中如何顯示內(nèi)容的CSS樣式的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
AngularJS使用帶屬性值的ng-app指令實(shí)現(xiàn)自定義模塊自動(dòng)加載的方法
這篇文章主要介紹了AngularJS使用帶屬性值的ng-app指令實(shí)現(xiàn)自定義模塊自動(dòng)加載的方法,結(jié)合實(shí)例形式分析了ng-app自動(dòng)加載我們自定義的模塊作為根模塊的操作步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-01-01
BootStrap+Angularjs+NgDialog實(shí)現(xiàn)模式對話框
在完成一個(gè)后臺管理系統(tǒng)時(shí)，需要用表格顯示注冊用戶的信息。但是用戶地址太長了，不好顯示。所以想做一個(gè)模式對話框，點(diǎn)擊詳細(xì)地址按鈕時(shí)，彈出對話框，顯示地址。下面小編給大家分享下實(shí)現(xiàn)方法，一起看下吧2016-08-08
AngularJS實(shí)現(xiàn)的輸入框字?jǐn)?shù)限制提醒功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的輸入框字?jǐn)?shù)限制提醒功能,涉及AngularJS事件監(jiān)聽與元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10
詳解angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套
這篇文章主要介紹了詳解angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04