AngularJS实现动态切换样式的方法分析
程序员文章站
2022-03-20 14:58:15
本文实例讲述了angularjs实现动态切换样式的方法。分享给大家供大家参考,具体如下:
angularjs相比原生的js或者jquery有着很大不同,对于一个简单的鼠标...
本文实例讲述了angularjs实现动态切换样式的方法。分享给大家供大家参考,具体如下:
angularjs相比原生的js或者jquery有着很大不同,对于一个简单的鼠标点击不同选项,动态切换样式该怎么实现呢。
本文实现的是点击某个标题,标题字体加粗,并随之切换相应的div内容,如下(点击推荐或热点)
ok.,实现过程
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在内的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. 好了,在浏览器运行试试,放心,没错的!
更多关于angularjs相关内容感兴趣的读者可查看本站专题:《angularjs指令操作技巧总结》、《angularjs入门与进阶教程》及《angularjs mvc架构总结》
希望本文所述对大家angularjs程序设计有所帮助。
上一篇: vue2.5.2使用http请求获取静态json数据的实例代码
下一篇: 过年吃什么水果好