利用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的元素删除,然后再创建 ...
随机推荐
- Unity不同平台生成中预处理的注意点
http://blog.csdn.net/pandawuwyj/article/details/7959335 Unity3D的项目,这周吃亏在宏上了.大背景是项目需要在Unity中用Hudson自动 ...
- [转载]在Vmware ESXI中安装群晖Synology DSM 5.0 (4528)
转载 在Vmware ESXI中安装群晖Synology DSM 5.0 (4528) 文件准备 Vmware ESXi用户安装需要的文件 NB_x64_5032_DSM_50-4528_Xpenol ...
- jsp页面间传递参数 中文乱码问题(zz)
jsp页面间传递参数 中文乱码问题 1.传递参数 var url = "*****Test.jsp?param1="+encodeURI(encodeURI(str));//对 ...
- jquery 按钮效果 正常、移上、按下
在网页设计过程中,经常遇见按钮的各状态效果.写了一个jquery扩展,使这个过程更方便! 使用前注意引用Jquery: JqueryExtend.js: (function ($) { // Butt ...
- 数据可视化(4)--jqplot
本来打算继续研究Google Charts,但上头下了指示让看jqplot,无奈,只好先将Google Charts放一放,不过真心觉得Google Charts不错,现在先开始jqplot. jqP ...
- ionic+angular+cordova 安卓环境搭建
1.java环境配置 下载java jdk 百度搜索java jdk安装完后在cmd窗口输入Java -version 显示以下即为安装成功.然后把java jdk配置到环境变量. (1)选择[新建系 ...
- Android学习笔记之树形菜单的应用...
PS:终于考完试了,总算是解脱了...可以正式上手项目开发了.... 学习内容: 1.掌握如何使用树形菜单... 对知识点进行一下补充...居然忘记了去学习树形菜单...不过在这里补上... Ex ...
- 使用fat-jar打包多个java工程为可执行文件
对于一个从C++转向Java的程序员来说,制作java的可执行文件,也算是比较棘手的问题.项目是前几个同事留下来的,几个必备的库文件和制作可执行文件的工具居然都是加密未解封的:不知道是不是因为公司和前 ...
- 正则表达式：re--python核心编程(3),chapter 1
最近听吴老的电台,收获颇多,给人映像最深的就是:学会编程 和 坚持学习:作为一名测试员,要从一名手工测试转化成 测试开发 或者资深的测试工程师,编码水平是必须具备的基本素质:吴老所说,撸1W到2W行代 ...
- 《Out of control》阅读笔记（一）
Out Of Control 说实话,当初买这本书起源于知乎诸位学问人的推荐,脑子一热就买了.为了不浪费这几十块钱,细致了看完了前三章,买来一看才发现原来这本书居然跟计算机有很深刻的关系.其实更准确地 ...