zoukankan      html  css  js  c++  java
  • angular 页签

    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; }

  • 相关阅读:
    Tomcat8服务
    windows部署tomcat
    LINUX部署TOMCAT服务器
    线程安全这么回答才牛逼(转)
    读取文件夹下的所有文件
    Mycat简单配置
    删除服务端文件
    nginx搭建文件服务器
    SERVER.MAPPATH
    存储过程与表的关系
  • 原文地址:https://www.cnblogs.com/bmaker/p/5755245.html
Copyright © 2011-2022 走看看