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里使用Dom操作Xml
Jan 22 Javascript
关于文本限制字数的js代码
Apr 02 Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
详谈javascript异步编程
Feb 21 Javascript
理解Javascript图片预加载
Feb 23 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
JavaScript常用工具方法封装
Feb 12 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语法(1)
2006/10/09 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
python实现的一个火车票转让信息采集器
2014/07/09 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
如何利用python查找电脑文件
2018/04/27 Python
Django 路由控制的实现代码
2018/11/08 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
python输入多行字符串的方法总结
2019/07/02 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
先进个人事迹材料
2014/01/25 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
财产分割协议书
2016/03/22 职场文书
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android