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 相关文章推荐
javascript 获取select下拉列表值的代码
Sep 07 Javascript
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
jquery+json实现的搜索加分页效果
Mar 31 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
微信小程序 video组件详解
Oct 25 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
javaScript基础详解
Jan 19 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
简单了解vue 插值表达式Mustache
Jul 22 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
详解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 pdo连接数据库操作示例
2019/11/18 PHP
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python冒泡排序算法的实现代码
2013/11/21 Python
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
计算机专业毕业生求职信
2014/04/30 职场文书
毕业生求职信
2014/06/10 职场文书
教师党员个人整改措施
2014/10/27 职场文书
老公保证书
2015/01/17 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android
Elasticsearch 批量操作
2022/04/19 Python
python使用BeautifulSoup 解析HTML
2022/04/24 Python
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js