效果如下图，当分别点击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. 安卓TTS语音合成经验分享（科大讯飞语音+）集成

    应用场景:足浴软件,技师钟房安排调派和队列排序查看,语音播报提醒.老程序是使用双屏显卡,windows系统PC上运行一个无人值守桌面程序.如今安卓机顶盒(WIFI)和MINI电视棒通过HDMI接口和支 ...

  2. Mysql 导入数据，推荐Source命令，太快了

    http://jingyan.baidu.com/article/cbf0e500d15c762eab289362.html

  3. 优化IIS7.5支持10万个同时请求windows 2008 R2

    通过对IIS7的配置进行优化,调整IIS7应用池的队列长度,请求数限制,TCPIP连接数等方面,从而使WEB服务器的性能得以提升,保证WEB访问的访问流畅. -

  4. angularjs + seajs构建Web Form前端(二)

    回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操作过程当中如何使用ui-bootstrap,继而完成简单功能后如何引入seajs后如何使n ...

  5. mysql ODBC connector相关问题

    mysql ODBC connector我安装了,怎么就不成功了 进到命令行,运行下边的:C:\>cd \windows\SysWOW64 C:\Windows\SysWOW64>odbc ...

  6. Lambda动态创建

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. Appium移动自动化测试（三）--安装Android模拟器

    当Android SDK安装完成之后,并不意味着已经装好了安装模拟器.Android系统有多个版本,所以我们需要选择一个版本进行安装. 第三节  安装Android 模拟器 我这里以Android 4 ...

  8. bootstrap精简教程

    bootstrap 的学习非常简单,并且它所提供的样式又非常精美.只要稍微简单的学习就可以制作出漂亮的页面. bootstrap中文网:http://v3.bootcss.com/ bootstrap ...

  9. Sylius – 100% 免费和开源的电子商务解决方案

    Sylius 项目提供了一个完整的电子商务解决方案.您将学习如何掌握它,帮助你在下一个项目中能够更快速的开发.Sylius 提供了一个完整的在线商店演示:demo.sylius.com. 您可能感兴趣 ...

  10. 开放产品开发（OPD）：Archi 汉化工具下载

    本文更新版本已挪至  http://www.zhoujingen.cn/blog/3378.html ------------------------------ 在OPD中,我们使用了ArchiMa ...