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.当点击切换页的选项上时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应 ...
随机推荐
- Cocos2d-x之String
| 版权声明:本文为博主原创文章,未经博主允许不得转载. 在Cocos2d-x中能够使用的字符串constchar*.std::string和cocos2d::__String等,其中const ...
- Ajax跨域(CROS)请求中的Preflighted requests
Ajax跨域(CROS)请求中的Preflighted requests:https://www.aliyun.com/jiaocheng/862989.html 10 分钟理解跨域请求:https: ...
- Django上线部署之uWSGI
环境: 1.CentOS 7.2 64位 2.SQL Server 2016 Enterprise 64位 3.Python 3.6.5 64位 4.root用户 要求: 按照顺序部署 1.Windo ...
- hibernate保存数据到mysql时的中文乱码问题
因为hibernate底层使用的是jdbc的技术,所以我参考了别人使用jdbc保存数据到mysql里面时解决乱码问题的方法! 首先要告诉数据库要插入的字符串的字符集,mysql 默认使用的字符集是 l ...
- C中printf函数的用法总结
函数语法 stdio.h文件中的定义: /* Write formatted output to stdout. */ int printf (const char *__restrict __for ...
- Codeforces 1188A 构造
题意:给你一颗树,树的边权都是偶数,并且边权各不相同.你可以选择树的两个叶子结点,并且把两个叶子结点之间的路径加上一个值(可以为负数),问是否可以通过这种操作构造出这颗树?如果可以,输出构造方案.初始 ...
- expdp和impdp
前言 一句话 expdp和impdp,只能在本地服务器运行 使用前 1.创建逻辑目录,该命令不会在操作系统创建真正的目录,最好以system等管理员创建. create directory dpd ...
- 十、设计模式之代理(Proxy)模式
什么是代理模式 代理模式是对象的结构模式,为其他对象提供一种对象以控制对这个对象的访问. 代理模式的结构图如下:(源自大话设计模式) Subject:定义了RealSubject和Proxy的公共 ...
- logback-paycore.xml 日志配置
<?xml version="1.0" encoding="UTF-8"?><configuration> <property n ...
- c++简单线程池实现(转)
线程池,简单来说就是有一堆已经创建好的线程(最大数目一定),初始时他们都处于空闲状态,当有新的任务进来,从线程池中取出一个空闲的线程处理任务,然后当任务处理完成之后,该线程被重新放回到线程池中,供其他 ...