angular中实现li或者某个元素点击变色的两种方法


Posted in Javascript onJuly 27, 2017

本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享给大家,希望对大家有帮助

先说一种最直接了当的不需要js控制。

方法一:直接在用ng-class就可以控制:

<p ng-click="state=1;" ng-class="{active:state==1}">浮伤年华</p>
<p ng-click="state=2;" ng-class="{active:state==2}">忧伤说笑</p>

在style里面设置如下:

<style type="text/css">
  .active{
   color:red;
  }
</style>

这样就会点哪个哪个变色了。

方法二:style同上,hetml如下:

<div ng-controller="active">
  <p ng-click="isActive(1)" class="{{i==1?'active':''}}">剧情再美</p>
      <p ng-click="isActive(2)" class="{{i==2?'active':''}}">终究是戏</p>
  </div>

js代码如下:

$scope.isActive=function(i){
  $scope.i=i;
}

若想要第一个默认为有颜色的,则在js里面加如下即可:

$scope.i=1;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 中的事件教程
Apr 05 Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
javascript基本类型详解
Nov 28 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
Vue自定义全局弹窗组件操作
Aug 11 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 #Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 #Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 #Javascript
angular2+node.js express打包部署的实战
Jul 27 #Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 #Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 #jQuery
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 #Javascript
You might like
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
学习php分页代码实例
2013/10/24 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
PHP时间函数使用详解
2019/03/21 PHP
JQuery 学习技巧总结
2010/05/21 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
深入浅析Python中的迭代器
2019/06/04 Python
python匿名函数的使用方法解析
2019/10/10 Python
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
家居设计专业个人自荐信范文
2013/11/26 职场文书
毕业生个人投资创业计划书
2014/01/04 职场文书
业务总经理岗位职责
2014/02/03 职场文书
高中运动会入场词
2014/02/14 职场文书
差生评语大全
2014/05/04 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
党员承诺书格式范文
2015/04/28 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书