利用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的元素删除,然后再创建 ...
随机推荐
- Android之输入框光标和Hint的位置
如图所示,要实现这一的需求,一般人的布局方式就是左边一button,右边一button,中间一个EditText,为了输入框的响应触摸范围更大往往不会把宽度设置为wrap_content,要么设置成m ...
- 使用SharePoint Designer定制开发专家库系统实例！
将近大半年都没有更新博客了,趁这段时间不忙,后续会继续分享一些技术和实际应用.对于Sharepoint的定制开发有很多种方式,对于一般的应用系统,可以使用Sharepoint本身自带的功能,如列表作为 ...
- [转]Android开发最佳实践
——欢迎转载,请注明出处 http://blog.csdn.net/asce1885 ,未经本人同意请勿用于商业用途,谢谢—— 原文链接:https://github.com/futurice/and ...
- IIS限制ip访问
1.禁止IP访问 http://jingyan.baidu.com/article/22fe7ced0462633002617f39.html 2.限制IP访问频率 http://q.cnblogs. ...
- Sqoop实现关系型数据库到hive的数据传输
Sqoop实现关系型数据库到hive的数据传输 sh脚本 #!/bin/sh v_columns=NOTE_ID_1,NOTE_NAME_1,NOTE_ID_2,NOTE_NAME_2,NOTE_ID ...
- nodejs中常用加密算法
在常用的nodejs+express工程中,为了安全在登录及表单传输时,应该都需进行加密传输,目前个人常用到的加密方式有下列几种: 1.Hash算法加密: 创建一个nodejs文件hash.js,输入 ...
- 斐波那契堆(三)之 Java的实现
概要 前面分别通过C和C++实现了斐波那契堆,本章给出斐波那契堆的Java版本.还是那句老话,三种实现的原理一样,择其一了解即可. 目录1. 斐波那契堆的介绍2. 斐波那契堆的基本操作3. 斐波那契堆 ...
- Android manifest之manifest标签详细介绍
AndroidManifest详细介绍 本文主要对AndroidManifest.xml文件中各个标签进行说明.索引如下: 概要PART--01 manifest标签PART--02 安全机制和per ...
- SQL Server里Grouping Sets的威力
在SQL Server里,你有没有想进行跨越多个列/纬度的聚集操作,不使用SSAS许可(SQL Server分析服务).我不是说在生产里使用开发版,也不是说安装盗版SQL Server. 不可能的任务 ...
- javascript之IE版本检测
近年来随着操作系统的升级以及各种新技术的开发普及,抛弃低版本IE已经是大势所趋,这对于前端人员来时是个好消息,可以不用花费太多的时间来做低版本的兼容,很多站点采用给予低版本IE以提示的方式(恩,很友好 ...