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.当点击切换页的选项上时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应 ...
随机推荐
- Oralce常用系统函数
dual:Oracle系统内部提供的一个用于实现临时数据计算的特殊表,它只有一个列DUMMY (VARCHAR2(1)) 字符类函数: concat--连接字符串 initcap--每个单词首字母大写 ...
- JetBrains.dotPeek
Free .NET Decompiler and Assembly Browser Decompile .NET assemblies to C# dotPeek is a free-of-charg ...
- Vue2.0---vuex初理解
先来一张vuex的帅照 第一眼看到这张图片我内心是万匹草泥马飞过. 简单理解: vuex:一个可以全局被使用的状态管理的“仓库”:state.js中定义初始状态,通过action去触发mutatio ...
- 在php中定义常量时,const和define的区别?
使用const使得代码简单易读,const本身就是一个语言结构,而define是一个函数.另外const在编译时要比define快很多. 1.const用于类成员变量的定义,一经定义,不可修改.Def ...
- 使用phpexcel导入excel文件种的时期数据时数据导入格式
在使用phpexcel导入类似于 YYYY-MM-DD HH:ii:ss格式的数据时,导入成功以后会发现导入的数据其实是类似于42085.746516204格式的数据( excel在存储时间类型的数据 ...
- websocket简单实现聊天
1.多人聊天 from geventwebsocket.handler import WebSocketHandler # 请求处理WSGI HTTP from geventwebsocket.ser ...
- Apache2.2学习笔记全集
一.基本介绍 待补充... 二.Apache默认配置文件解释 # 定义apache运行的目录,即程序所在的位置 ServerRoot "/usr/local/apache2" # ...
- 【原创】微信最新表情js代码
最近在做仿微信聊天表情发送功能,所以需要展示常用的105个表情. 因为对接微信公众号的时候,用户聊天过程中发送的表情,微信服务器会转成对应的代码传给我们的服务器,类似如下: :/::)/::~/::B ...
- 2018-2-13-win10-UWP-应用设置
title author date CreateTime categories win10 UWP 应用设置 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17: ...
- ARM-LINUX学习记录
1:调用C语言函数之前会有一段汇编代码在前面执行来完成软硬件方面的初始化.比如:关闭看门狗:初始化时钟:设置堆栈:调用main函数等.在学习51单片机时候这些操作是由开发环境(如KEIL)在编译C代码 ...