AngularJS实现动态切换样式的方法分析


Posted in Javascript onJune 26, 2018

本文实例讲述了AngularJS实现动态切换样式的方法。分享给大家供大家参考,具体如下:

AngularJS相比原生的js或者jquery有着很大不同,对于一个简单的鼠标点击不同选项,动态切换样式该怎么实现呢。

本文实现的是点击某个标题,标题字体加粗,并随之切换相应的div内容,如下(点击推荐或热点)

AngularJS实现动态切换样式的方法分析

AngularJS实现动态切换样式的方法分析

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程序设计有所帮助。

Javascript 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
js精确的加减乘除实例
Nov 14 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
prettier自动格式化去换行的实现代码
Aug 25 Javascript
详解JavaScript中的this指向问题
Feb 05 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 #Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 #jQuery
在vue中使用公共过滤器filter的方法
Jun 26 #Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 #Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 #Javascript
Vue动态控制input的disabled属性的方法
Jun 26 #Javascript
利用Decorator如何控制Koa路由详解
Jun 26 #Javascript
You might like
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
基于jquery的表格排序
2010/09/11 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
在Linux下调试Python代码的各种方法
2015/04/17 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
机器学习10大经典算法详解
2017/12/07 Python
值得收藏的10道python 面试题
2019/04/15 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
python中的yield from语法快速学习
2020/11/06 Python
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
银行学习十八大感想
2014/01/11 职场文书
材料会计岗位职责
2014/03/06 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
预备党员转正材料
2014/12/19 职场文书
男生贾里读书笔记
2015/06/30 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
工作感想范文
2015/08/07 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
怎么用Python识别手势数字
2021/06/07 Python
部分武汉产收音机展览
2022/04/07 无线电
浅析Python OpenCV三种滤镜效果
2022/04/11 Python
MySQL数据库 安全管理
2022/05/06 MySQL