HTML:

<link rel="stylesheet" href="views/show/tab.css"/> <div> <ul class="nav nav-tabs" ng-init="vm.activeTab=1"> <li ng-class="{active: vm.activeTab == 1}"><a href="javascript:;" ng-click="vm.activeTab = 1">标签1</a></li> <li ng-class="{active: vm.activeTab == 2}"><a href="javascript:;" ng-click="vm.activeTab = 2">标签2</a></li> </ul> <div class="tab-content tab-bordered"> <div class="tab-panel" ng-show="vm.activeTab == 1"> 标签1的内容 </div> <div class="tab-panel" ng-show="vm.activeTab == 2"> 标签2的内容 </div> </div> </div> <h3>说明</h3> 这里演示的是直接通过bootstrap实现的方法。 <hr/>还可以通过angular-bootstrap的tabset指令实现,参见 <a href="http://angular-ui.github.io/bootstrap/#/tabs" target="_blank">官方Demo</a>

JS:

'use strict'; angular.module('ngShowcaseApp').controller('ctrl.show.tab', function ($scope) { var vm = $scope.vm = {}; });

CSS:

/*给分页框的内容区加边距和边框*/ .tab-content.tab-bordered { border: 1px solid lightgray; border-top: none; padding: 15px; border-radius: 0 0 4px 4px; }

angular 页签的更多相关文章

  1. 用于实现tab页签切换页面的angular路由复用策略

    使用场景 打开菜单页面的时候,出现对应页面的页签.切换页签,原来的页面信息状态保留,关闭页签则保留的信息删除.使用路由复用策略,保存路由快照.实现效果如图所示 实现过程 概述: 1.在app.modu ...

  2. ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  3. WPF如何实现一个漂亮的页签导航UI

    最近看到一个比较漂亮的UI主界面,该UI是用左边的页签进行导航,比较有特色,就想着尝试用WPF来实现一下.经过一番尝试,基本上将UI设计图的效果用WPF程序进行了实现.下面介绍一下主要的思路: 1 U ...

  4. JavaScript选项卡/页签/Tab的实现

    选项卡,也称页签,英文用Tab(Module-Tabs)表示.Tab将不同的内容重叠放在一个布局块内,重叠的内容区里每次只有其中一个是可见的. Tab可以在相同的空间里展示更多的信息,它把相似的主题分 ...

  5. C# 重绘tabControl,添加关闭按钮(页签)

    C# 重绘tabControl,添加关闭按钮(页签) 调用方法 参数: /// <summary> /// 初始化 /// </summary> /// <param n ...

  6. 实现TabView(页签)效果

    今天花了点时间,设计了一个网页上用的tabview(页签.tabcontrol)效果.个人觉得实现得比较不错,网页元素用得比较少,js代码也比较精练.测试了一下支持IE.FireFox以及chrome ...

  7. android124 zhihuibeijing 新闻中心-新闻 -北京页签 下拉刷新

    缓存工具类:以url为key,json数据为value, package com.itheima.zhbj52.utils; import com.itheima.zhbj52.global.Glob ...

  8. android123 zhihuibeijing 新闻中心-新闻 页签 ViewPagerIndicator实现

    ## ViewPagerIndicator ## 使用导入ViewPagerIndicator库的方式相当于可以改源码,打包编译Eclips可以自动完成. ViewPager指针项目,在使用ViewP ...

  9. 显示 EXCEL 的页签列表

    如果你的EXCEL表有很多页签,反复点击左右箭头可能会很费时间. 不妨试试在 左箭头 或者 右箭头 上点击 右键,会有页签列表弹出.

随机推荐

  1. Delphi Xml

    用递归方法,使用 xml 文档生成 Treeview 树形视图.由于是动态生成,所以可以通过修改 xml 的逻辑来定制 Treeview 的结构,从而实现了 xml 对 Treeview 的动态配置, ...

  2. NX二次开发-UFUN工程图表格注释获取某一列的tag函数UF_TABNOT_ask_nth_column

    NX9+VS2012 #include <uf.h> #include <uf_tabnot.h> #include <NXOpen/Part.hxx> #incl ...

  3. c语言NULL和0区别及NULL详解

      先看下面一段代码输出什么: #include<stdo.h> int main() { int *p=NULL; printf("%s",p); } 输出<n ...

  4. 导出lab动态命名文件夹文件名

    set tmp=%date:~0,10%echo %tmp:/=-%mkdir %tmp:/=-%cd %tmp:/=-%exp meet/meet@orcl_11 file=%tmp:/=-%.dm ...

  5. JS Date Math Number

    Date对象 Date对象和String对象不太一样,定义了一字符串,其实就是一个String对象,就可以直接调用属性和方法. Date对象的使用,必须使用new关键字来创建,否则,无法调用Date对 ...

  6. WebStorm+Node.js开发环境的配置

    1 下载地址:  webstorm:http://www.jetbrains.com/webstorm node.js:https://nodejs.org/download/ 2 安装node.js ...

  7. linux centos 装g++安装不了

    今天需要编译一个项目的时候在装g++都装不上, [root@master hadoop]# yum install g++ Loaded plugins: fastestmirror, refresh ...

  8. Python从入门到精通视频(全60集)✍✍✍

    Python从入门到精通视频(全60集)  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看 ...

  9. winsock 服务器代码(不建议win服务器listen防火墙会禁止外部访问的)

    int SessionBase::ServerSock() { /* 4 * WSADATA是个结构体,在WSAStartup中被填充. 5 * WSAStartup为调用WinSock准备初始化的工 ...

  10. Android开发 ImageView开发记录

    改变图片的着色 默认是这个方法 /** * 为图像设置着色选项. Assumes * {@link PorterDuff.Mode#SRC_ATOP} blending mode. * * @para ...