利用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的元素删除,然后再创建 ...
随机推荐
- tomcat的网站屏蔽IP的方法
<Host> <Valve className="org.apache.catalina.valves.RemoteAddrValve" deny=" ...
- nginx url自动加斜杠的问题
nginx url自动加斜杠问题及301重定向 时间:2016-02-04 15:14:28来源:网络 导读:nginx url自动加斜杠问题及301重定向,URL指向一个目录并且在最后没有包含斜杠, ...
- Oracle DBA的神器： PRM恢复工具，可脱离Oracle软件运行，直接读取Oracle数据文件中的数据
Oracle DBA的神器: PRM恢复工具,可脱离Oracle软件运行,直接读取Oracle数据文件中的数据 PRM 全称为ParnassusData Recovery Manager ,由 诗檀软 ...
- 发布大幅重构优化的 TouchVG 1.0.2
发布大幅重构优化的 TouchVG 1.0.2,支持SVG.多模块扩展结构,欢迎评阅改进.提交pull request. https://github.com/rhcad/touchvg 关于 Tou ...
- 一步一步实战扩展 ASP.NET Route，实现小写 URL、个性化 URL
介绍 不知道大家在使用 ASP.NET MVC 时有没有一些扩展要求,反正我是有很多.在使用 MVC 这几年(PS:我是从 1.0 开始学,2.0.3.0 开发至今),我深深地觉得 MVC 的扩展性真 ...
- AssetBundle系列——场景资源之解包（二）
本篇接着上一篇继续和大家分享场景资源这一主题,主要包括两个方面: (1)加载场景 场景异步加载的代码比较简单,如下所示: private IEnumerator LoadLevelCoroutine( ...
- 斜堆(二)之 C++的实现
概要 上一章介绍了斜堆的基本概念,并通过C语言实现了斜堆.本章是斜堆的C++实现. 目录1. 斜堆的介绍2. 斜堆的基本操作3. 斜堆的C++实现(完整源码)4. 斜堆的C++测试程序 转载请注明出处 ...
- 火狐浏览器修改userAgent
火狐浏览器修改userAgent的办法: 在火狐浏览器地址栏输入“about:config”,按下回车进入设置菜单. 找到“general.useragent.override”,如果没有这一项,则点 ...
- Feathers JS – 基于 Express 构建数据驱动的服务
Feathers 是一个轻量的 Web 应用程序框架,基于 NodeJS 最流行的 Web 框架——Express.这使得它很容易使用 socket.io 来创建 RESTful Web 服务和实 ...
- [转]easyui datagrid 批量编辑和提交
web前台主要代码: <script type="text/javascript"> $(function() { var $dg = $("#dg" ...