AngularJS实现动态切换样式的方法分析
网络编程 2021-07-04 16:46www.168986.cn编程入门
这篇文章主要介绍了AngularJS实现动态切换样式的方法,结合实例形式分析了AngularJS事件响应与样式动态控制相关操作技巧,需要的朋友可以参考下
本文实例讲述了AngularJS实现动态切换样式的方法。分享给大家供大家参考,具体如下:
AngularJS相比原生的js或者jquery有着很大不同,对于一个简单的鼠标点击不同选项,动态切换样式该怎么实现呢。
本文实现的是点击某个标题,标题字体加粗,并随之切换相应的div内容,如下(点击推荐或热点)
Ok.,实现过程
1. html代码
<!--推荐或热点标题--> <div class="TitStyle"> <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在内的CSS样式
.TitStyle{ width: 16rem; height: 2rem; } .TitStyle > div{ display: inline-block; width: 7.9rem; height: 2rem; vertical-align: middle; text-align: center; line-height: 2rem; } .TitStyle > div > a{ width: 2.5rem; height: 1.9rem; display: inline-block; vertical-align: middle; font-size: .8rem; color: #666666; } .TitStyle > div > .selected{ border-bottom: 1px solid #3BB4C1; font-weight: bold; }
4. 好了,在浏览器运行试试,放心,没错的!
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《》、《》及《》
希望本文所述对大家AngularJS程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程