angular.js实现二级tab切换
<div class="guide-type">
<h3 ng-class="{true:'active', false:''}[tab == 'pc' || tab == 'weixin' || tab == 'app']" ng-click="selectTab('pc');">系统介绍</h3>
<ul ng-show="tab == 'pc' || tab == 'weixin' || tab == 'app'">
<li ng-class="{true:'active', false:''}[tab == 'pc']" ng-click="selectTab('pc');">门户网站</li>
<li ng-class="{true:'active', false:''}[tab == 'weixin']" ng-click="selectTab('weixin');">微信公众号</li>
<li ng-class="{true:'active', false:''}[tab == 'app']" ng-click="selectTab('app');">APP</li>
</ul>
</div>
<div class="guide-type">
<h3 ng-class="{true:'active', false:''}[tab == 'transfer' || tab == 'rent' || tab == 'mortgage']" ng-click="selectTab('transfer');">业务办理</h3>
<ul ng-show="tab == 'transfer' || tab == 'rent' || tab == 'mortgage'">
<li ng-class="{true:'active', false:''}[tab == 'transfer']" ng-click="selectTab('transfer');">转让业务</li>
<li ng-class="{true:'active', false:''}[tab == 'rent']" ng-click="selectTab('rent');">出租业务</li>
<li ng-class="{true:'active', false:''}[tab == 'mortgage']" ng-click="selectTab('mortgage');">抵押业务</li>
</ul>
</div>
<div class="guide-type">
<h3 ng-class="{true:'active', false:''}[tab == 'deposit']" ng-click="selectTab('deposit');">保证金缴纳指南</h3>
</div>
<div class="guide-type">
<h3 ng-class="{true:'active', false:''}[tab == 'register' || tab == 'service']" ng-click="selectTab('register');">常见问题</h3>
<ul ng-show="tab == 'register' || tab == 'service'">
<li ng-class="{true:'active', false:''}[tab == 'register']" ng-click="selectTab('register');">如何进行网站注册</li>
<li ng-class="{true:'active', false:''}[tab == 'service']" ng-click="selectTab('service');">如何申请成为中介</li>
</ul>
</div>
angular.js实现二级tab切换的更多相关文章
- 【angular】angular实现简单的tab切换
html: <div class="list-group" ng-repeat="tab in menuList"> <a href=&quo ...
- Angular——tab切换案例
基本介绍 angular框架下的tab切换,相比较于之前的纯js写的代码,有一个很大的特点就是以数据为驱动,基本上不用搜索dom元素就可以实现效果 基本使用 (1)导航部分使用的是的状态使用的是ng- ...
- 又一Tab切换效果(js实现)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js用户管理中心tab切换界面模板
效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...
- JS实现Tab切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js或者jq的tab切换
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 使用swiper.js实现移动端tab切换
在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...
- bootstrap 标签页tab切换js(含报错原因)
booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...
- js Tab切换实例
js 实现 tab 切换 实现如下效果: 1.图片每1秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击切换页的选项上时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应 ...
随机推荐
- jenkins实现master变化时,才触发构建(过滤分支)
现状:现在是这样的,每个开发push时,都触发jenkins进行构建 期望:只有当代码被push到master时才进行构建 (根据使用的git平台)做这些配置需要先了解一些概念: (github) p ...
- 爱奇艺面试Python,竟然挂在第5轮…(转)
今天给大家分享我曾经在爱奇艺的面试,过程还是比较有意思的,可以给大家一些参考 聊骚阶段 嗲妹妹:你好,我是爱奇艺的HR,我们正在招聘运维开发岗位,请问您最近有在看工作机会吗? 我:(这声音也太酥了吧我 ...
- Kali开启SSH服务
1. 一.配置SSH参数 修改sshd_config文件,命令为: vi /etc/ssh/sshd_config 将#PasswordAuthentication no的注释去掉,并且将NO修 ...
- intel instruction 指令速查
参考:http://ref.x86asm.net/ http://ref.x86asm.net/coder32.html
- [ERR] 1114 - The table 'xxx' is full
异常原因: 磁盘空间不足 解决办法: 1. 新增磁盘 2. 删除无用数据 信息补充: df: df -h #查询磁盘空间命令 du: du|sort -nr|more #显示目录或者文件所占空间 du ...
- golang的数据类型之布尔类型
1)布尔类型也叫 bool类型,bool类型数据只允许取值true或false2)bool类型占1个字节.3)bool类型适于逻辑运算,一般用于程序流程控制4)不可以0或非0的整数替代false和tr ...
- Codeforces 492E Vanya and Field
E. Vanya and Field time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- Java中的动态代理(jdk和cglib)
JAVA的动态代理 代理模式 代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类 ...
- Python之实现迭代器协议
什么是迭代器: --迭代器(迭代就是循环) 可以被next()函数调用并不断返回下一个值的对象称为迭代器:Iterator 可迭代对象有: 一类是集合数据类型,如list,tuple,dict,set ...
- JavaScript — event介绍以及兼容处理
JavaScript - event介绍以及兼容处理 1.事件流 浏览器发展到第四代时(IE4及 Netscape Communicator 4),浏览器开发团队遇到一个问题:页面的哪个部分会拥有某个 ...