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 相关文章推荐
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
浅谈JavaScript字符集
May 22 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
JS功能代码集锦
May 04 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 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结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
javascript截取字符串小结
2015/04/28 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
angular2中Http请求原理与用法详解
2018/01/11 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
使用Python绘制图表大全总结
2017/02/11 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
将python图片转为二进制文本的实例
2019/01/24 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
python 写一个水果忍者游戏
2021/01/13 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
总经理岗位职责
2013/11/09 职场文书
毕业留言寄语大全
2014/04/10 职场文书
给市场的环保建议书
2014/05/14 职场文书
法人任命书范本
2014/06/04 职场文书
家长通知书家长意见
2014/12/30 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
分享python函数常见关键字
2022/04/26 Python