利用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的元素删除,然后再创建 ...
随机推荐
- 基于安卓高仿how-old.net实现人脸识别估算年龄与性别
前几段微软推出的大数据人脸识别年龄应用how-old.net在微博火了一把,它可以通过照片快速获得照片上人物的年龄,系统会对瞳孔.眼角.鼻子等27个“面部地标点"展开分析,进而得出你的“颜龄 ...
- HTML5[5]：在移动端禁用长按选中文本功能
在手机浏览器中,长按可选中文本,但如果在应用中,会给人一种异样的感觉,最好还是禁用此功能为上. * { -webkit-touch-callout:none; -webkit-user-select: ...
- MySQL server has gone away 问题的解决方法
mysql出现ERROR : (2006, 'MySQL server has gone away') 的问题意思就是指client和MySQL server之间的链接断开了. 造成这样的原因一般是s ...
- 基于jquery的响应式提示框SweetAlert
介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等.交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果.不过本插件至少支持IE9+.使用方式 ...
- 常用CSS Reset汇总
什么是Css Reset呢? 在 HTML标签在浏览器里有默认的样式,不同浏览器的默认样式之间也会有差别.在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率.所以解决的方法就是一开始 ...
- 另一个 OleDbParameterCollection 中已包含 OleDbParameter 错误分析及解决办法
程序非常简单,就是从一个表中取出一个符合要求的数据,如果取到,就把该数据对应的计数加1.也就是执行不同的两个SQL语句操作同一个表,并且这两个SQL的参数是一样的.在一个函数里完成这个调用.执行第二个 ...
- .NET中的枚举（Enum）
摘要:.NET中的枚举分为简单枚举和标志枚举,这次主要总结一下标志枚举适用条件,以及它的使用方法,并在文章的最后列举枚举使用的一些规范. 在刚接触.NET的枚举时,只用简单的枚举,对于标记枚举,只知道 ...
- JS 数组去重的几个方法
Array.prototype.unique1 = function () { var n = []; //一个新的临时数组 for (var i = 0; i < this.length; i ...
- SQL增删查改注意的事项
一.新增 1.增加的时候,bit字段要用“0,1”表示false,和true: 2.时间字段,用单引号包括,里面要遵循基本时间格式: 3,不能为标识列(自动编号列)插入数据(特殊情况下:set ide ...
- 数学 --- 高斯消元 POJ 1830
开关问题 Problem's Link: http://poj.org/problem?id=1830 Mean: 略 analyse: 增广矩阵:con[i][j]:若操作j,i的状态改变则con[ ...