利用ng-click、ng-switch和click-class制作切换的tabl
效果如下图，当分别点击1,2，3时，下面的不同颜色的div会切换
<html ng-app>
<head>
<title></title>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<style type="text/css">
*{
margin:0;
padding: 0;
}
ul{
height: 30px;
}
ul li{
width: 198px;
height: 30px;
border: 1px solid #ccc;
background: #fff;
color:#000;
float: left;
list-style: none;
text-align: center;
} .clicked{
background: #000;
color:#fff;
} .div1,.div2,.div3{
width: 600px;
height: 400px;
}
.div1{
background: red;
}
.div2{
background: green;
}
.div3{
background: yellow;
} </style>
</head>
<body>
<ul ng-init="a=1">
<li ng-click="a=1" ng-class="{clicked:a===1}">1</li>
<li ng-click="a=2" ng-class="{clicked:a===2}">2</li>
<li ng-click="a=3" ng-class="{clicked:a===3}">3</li>
</ul> <div ng-switch on="a">
<div ng-switch-when="1" class='div1'></div>
<div ng-switch-when="2" class='div2'></div>
<div ng-switch-when="3" class='div3'></div>
</div>
</body>
</html>
利用ng-click、ng-switch和click-class制作切换的tabl的更多相关文章
- jQuery的区别：$().click()和$(document).on('click','要选择的元素',function(){})的不同
jQuery的出现,大大简化了对dom的操作,但是如果不是仔细阅读api和进行操作,就不知道其中最大的优点和使用方式.就拿$().click()和$(document).on('click','要选择 ...
- 当一个HTML元素需要添加mouseon、mouseout与click事件，或者mouserenter、mouseleave和click事件时，click事件无法触发
当一个HTML元素需要添加mouseon.mouseout与click事件,或者mouserenter.mouseleave和click事件时,click事件无法触发 针对上述问题,我遇到的有两种情况 ...
- $().click()和$(document).on('click','要选择的元素',function(){})的不同（转https://www.cnblogs.com/sqh17/p/7746418.html）
$(document).on();用于动态绑定事件 jQuery的出现,大大简化了对dom的操作,但是如果不是仔细阅读api和进行操作,就不知道其中最大的优点和使用方式.就拿$().click()和$ ...
- hexo next中遇到的bug，引发出的关于jquery中click()函数和on("click",function())的区别
个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景: 本人在维护博客的时候加入了aplaye ...
- 基础学习：社会工程学---利用Kali下的setoolkit进行钓鱼网站制作
利用Kali下的setoolkit进行钓鱼网站制作 1.打开kali2019,输入setoolkit,打开setoolkit模块 2.输入命令1,进入钓鱼攻击页面 3.输入命令2,进入web钓鱼攻击页 ...
- 利用反射--调用一个按钮的Click事件
最基本的调用方法 (1)button1.PerformClick();(2)button1_Click(null,null);(3)button_Click(null,new EventArgs()) ...
- python的operator.itemgetter('click')用于定义获取'click'项的函数
python的排序参见文章http://blog.csdn.net/longshenlmj/article/details/12747195 这里介绍 import operator模块 operat ...
- 【jQuery 区别】.click()和$(document).on("click","指定的元素",function(){});的区别
给出以下的代码展示: //绑定 下一页 的点击事件 $("a[aria-label='Next']").click(function(){ $("a[aria-label ...
- jquery $('#btn').click与$("#btn").live("click",function()有什么区别？
live方法绑定的事件处理函数,在页面中未来添加的元素只要满足原来的选择器,仍然会导致事件触发.普通的事件绑定则没有这个效果.对于#btn这个选择器来说,如果你未来将id为btn的元素删除,然后再创建 ...
随机推荐
- linux下mysql字符集编码问题的修改
安装完的MySQL的默认字符集为 latin1 ,为了要将其字符集改为用户所需要的(比如utf8),就必须改其相关的配置文件:由于linux下MySQL的默认安装目录分布在不同的文件下:不像windo ...
- sql server版本
10.00.1600 :SQL 2008 10.50.1600:SQL 2008 R2 10.50.2500:SQL 2008 R2 SP1
- 【软件分析与挖掘】A Comparative Study of Supervised Learning Algorithms for Re-opened Bug Prediction
摘要: 本文主要是评估多种监督机器学习算法的有效性,这些算法用于判断一个错误报告是否是reopened的,算法如下: 7种监督学习算法:kNN,SVM, SimpleLogistic,Bayesian ...
- Python 闭包
什么是闭包? 闭包(closure)是词法闭包(lexical closure)的简称.闭包不是新奇的概念,而是早在高级程序语言开始发展的年代就已产生. 对闭包的理解大致分为两类,将闭包视为函数或者是 ...
- DDD：Repository和UnitOfWork的生命周期问题
UnitOfWork UnitOfWork是一种有状态的.用例级别的对象.如果不采用ORM是不会使用UnitOfWork模式的, Repository Repository是一种特殊的领域服务,因此是 ...
- spring源码分析之spring-web remoting模块概况及基本概念
spring-web总体分为三部分:caucho.httpinvoker.jaxws,其总体构造图如下: uml结构: 先看看网上搜索到的上述实现的原理吧:Spring RMI,Hessian/Bur ...
- Install Redis on CentOS 6.4--转
Install Redis on CentOS 6.4 source:http://thoughts.z-dev.org/2013/05/27/install-redis-on-centos-6-4/ ...
- jQuery+Ajax滚屏异步加载数据实现（附源码）
一.CSS样式 body { font:12px/1.0em Microsoft Yahei; line-height:1.6em; background:#fff; line-height:1.2e ...
- JS手动触发事件，转载
1. createEvent(eventType)参数:eventType 共5种类型: Events :包括所有的事件. HTMLEvents:包括 'abort', 'b ...
- [python]在场景中理解装饰器
原来我也自己通过查资料,来学习python的装饰器,但是效果不好.因为没有接触过需要用到装饰器的场景,所以 一起的资料都只停留在纸面上,但是今天偶然看到了vimer的这篇文章:http://www.v ...