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.当点击切换页的选项上时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应 ...
随机推荐
- appium常见问题05_修改Android手机运行环境(adb指令修改hosts)
自动化测试过程中,手机有时会跳网,怎样保持手机测试的环境稳定性,可以通过adb指令修改android手机hosts,保持手机运行在hosts中配置的环境中: 修改方法如下: 前提条件:已安装andro ...
- Android深度探索-卷1第一章心得体会
本章介绍了安卓系统移植与驱动开发的概述,安卓的系统架构有四层:1 Linux内核,2 c/c++代码库, 3 Android SDK API, 4 应用程序 在读的过程中看到了专业名词,查了查,长点 ...
- java多线程学习笔记(六)
本节开始synchronized关键字的最后一部分内容: 静态同步方法synchronized方法与synchronized(class)代码块 关键字synchronized还可以用在static静 ...
- Vue.config.silent = true
Vue.config vue的全局配置文件 silent默认值是false Vue.config.silent = true 取消Vue所有的日志和警告
- [心得]Ubuntu無法ssh登入
裝好ssh後,發覺無法用root登入,可是sshd_config接正確. 後來發現原因在於,Ubuntu沒有root帳號,但是可以透過sudo -s拿到root權限. su root 密碼怎樣打也行不 ...
- 如何用Mybatis分库分表
分库 在分库的时候 有时候为了方便 一些表需要存放所有库的信息,称为全局库.如:用户表存放所有的用户. 此时分库的思路 数据库分为全局库和业务库,其中业务库又分为N多个库,全局库只放个别表方便开发. ...
- elasticsearch relevance score相关性评分的计算
一.多shard场景下relevance score不准确问题 1.问题描述: 多个shard下,如果每个shard包含指定搜索条件的document数量不均匀的情况下,会导致在某个shard上doc ...
- 由hbase.client.scanner.caching参数引发的血案(转)
转自:http://blog.csdn.net/rzhzhz/article/details/7536285 环境描述 Hadoop 0.20.203.0Hbase 0.90.3Hive 0.80.1 ...
- HashMap不能使用基本数据类型作为key
HashMap存储元素采用的是hash表存储数据,每存储一个对象的时候,都会调用其hashCode()方法,算出其hash值,如果相同,则认为是相同的数据,直接不存储,如果hash值不同,则再调用其e ...
- mysql中级操作
解析sql执行过程 show VARIABLES like '%profil%' //查看是否开启了剖析 如没开启set profiling=1; 启用 show profiles; set @que ...