效果如下图，当分别点击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的更多相关文章

  1. jQuery的区别：$().click()和$(document).on('click','要选择的元素',function(){})的不同

    jQuery的出现,大大简化了对dom的操作,但是如果不是仔细阅读api和进行操作,就不知道其中最大的优点和使用方式.就拿$().click()和$(document).on('click','要选择 ...

  2. 当一个HTML元素需要添加mouseon、mouseout与click事件，或者mouserenter、mouseleave和click事件时，click事件无法触发

    当一个HTML元素需要添加mouseon.mouseout与click事件,或者mouserenter.mouseleave和click事件时,click事件无法触发 针对上述问题,我遇到的有两种情况 ...

  3. $().click()和$(document).on('click','要选择的元素',function(){})的不同（转https://www.cnblogs.com/sqh17/p/7746418.html）

    $(document).on();用于动态绑定事件 jQuery的出现,大大简化了对dom的操作,但是如果不是仔细阅读api和进行操作,就不知道其中最大的优点和使用方式.就拿$().click()和$ ...

  4. hexo next中遇到的bug，引发出的关于jquery中click()函数和on("click",function())的区别

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景: 本人在维护博客的时候加入了aplaye ...

  5. 基础学习：社会工程学---利用Kali下的setoolkit进行钓鱼网站制作

    利用Kali下的setoolkit进行钓鱼网站制作 1.打开kali2019,输入setoolkit,打开setoolkit模块 2.输入命令1,进入钓鱼攻击页面 3.输入命令2,进入web钓鱼攻击页 ...

  6. 利用反射--调用一个按钮的Click事件

    最基本的调用方法 (1)button1.PerformClick();(2)button1_Click(null,null);(3)button_Click(null,new EventArgs()) ...

  7. python的operator.itemgetter('click')用于定义获取'click'项的函数

    python的排序参见文章http://blog.csdn.net/longshenlmj/article/details/12747195 这里介绍 import operator模块 operat ...

  8. 【jQuery 区别】.click()和$(document).on("click","指定的元素",function(){});的区别

    给出以下的代码展示: //绑定 下一页 的点击事件 $("a[aria-label='Next']").click(function(){ $("a[aria-label ...

  9. jquery $('#btn').click与$("#btn").live("click",function()有什么区别？

    live方法绑定的事件处理函数,在页面中未来添加的元素只要满足原来的选择器,仍然会导致事件触发.普通的事件绑定则没有这个效果.对于#btn这个选择器来说,如果你未来将id为btn的元素删除,然后再创建 ...

随机推荐

  1. 将在本地创建的Git仓库push到Git@OSC

    引用自:http://my.oschina.net/flan/blog/162189 在使用git 处理对android的修改的过程之中总结的.但不完善 Git push $ git push ori ...

  2. Raspberry Pi --操作LED

    最简单的一个树莓派GPIO操作入门,这里记录以下 先上连接图: 卧槽.图真特么的大 用到了GPIO的GND和#18针脚,这就不上图了,红色的线接的是18针脚,暗色的线接的是GND针脚,下面上Pytho ...

  3. eclipse中对项目进行分类管理

    我们在用Eclipse开发的时候通常会建很多类型的项目,如公司项目.自己项目.Demo等等,并且一个项目又可能有一个主项目和多个引用包,如果包所有的项目都放到一个workspace下面,则会引起混来, ...

  4. 重识JavaScript 之 数据类型的相互转换

    字符串转换数字 var a = '1'; console.log(+a); console.log(a++); console.log(-a+3); console.log(parseInt(a)); ...

  5. Web压力测试 ApacheBench(ab)

    ApacheBench命令原理 ab命令会创建很多的并发访问线程,模拟多个访问者同时对某一URL地址进行访问.它的测试目标是基于URL的,因此,既可以用来测试Apache的负载压力,也可以测试ngin ...

  6. 关于VSTO调用Excel后进程无法退出的解决方案：

    VSTO的Excel对象模型提供了托管代码对Excel的操作.但是它的实现时通过RCW(Runtime Com Wrapper)实现的,所以无法完全按照托管代码的运行方式操作.COM的资源释放时通过引 ...

  7. Linux shell tee指令学习

    转载自:http://blog.163.com/xujian900308@126/blog/static/12690761520129911304568/   tee tee:读取标准输入的数据,并将 ...

  8. WebService基于SoapHeader实现安全认证

    本文仅提供通过设置SoapHeader来控制非法用户对WebService的调用,如果是WebService建议使用WSE3.0来保护Web服务,如果使用的是Viaual Studio 2008可以使 ...

  9. JS魔法堂：关于元素位置和鼠标位置的属性

    一.关于鼠标位置的属性   1. 触发鼠标事件的区域 盒子模型中的border,padding,content区域会触发鼠标事件,点击margin区域将不触发鼠标事件.   2. 鼠标事件对象Mous ...

  10. jQuery实现表格拖动排序

    原理就是利用mousedown.mouseover.mouseup事件实现拖动,并用Ajax实现保存结果. JS代码如下: <!--题目调序功能--> <script type=&q ...