前几天我发的东西,可能对于没有基础的人很难理解,那么今天,咱们就发点简单点的东西吧!

Angular显示隐藏,选项卡!

还是那句话,话不多说,上代码:

 <!DOCTYPE html>

 <html ng-app="myApp">

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             *{

                 margin: 0;

                 padding: 0;

                 text-decoration: none;

             }

             #Box{

                 display: block;

                 border: 1px solid black;

                 width: 50%;

                 height: 400px;

                 margin: 100px auto;

             }

             nav{

                 display: flex;

                 background: #BFBFBF;

             }

             nav a{

                 display: flex;

                 justify-content: space-around;

                 width: 33.3%;

                 height: 40px;

                 line-height: 40px;

                 color: black;

             }

             .active{

                 background-color: red;

                 color: white;

             }

             .page{

                 font-size: 3rem;

                 margin: 150px 40%;

             }

         </style>

         //别忘了引入Angular的插件哦!

         <script type="text/javascript" src="js/angular.min.js"></script>

     </head>

     <body  ng-controller="test">

         <div id="Box">

             <nav>

                    <a ng-class="{'active':tabIndex==0}" href="javascript:;" ng-click="tab(0)">tab1</a>

                    <a ng-class="{'active':tabIndex==1}" href="javascript:;" ng-click="tab(1)">tab2</a>

                    <a ng-class="{'active':tabIndex==2}" href="javascript:;" ng-click="tab(2)">tab3</a>

             </nav>

             <div class="pages">

                 <div class="page" ng-show="tabIndex==0">tab1</div>

                 <div class="page" ng-show="tabIndex==1">tab2</div>

                 <div class="page" ng-show="tabIndex==2">tab3</div>

             </div>

         </div>

         <script>

           var app = angular.module('myApp',[]);

           app.controller('test',function($scope){

                   //定义要聚焦的索引

                 $scope.tabIndex=0;

                 //更改要聚焦的tab

                 $scope.tab=function(index){

                     $scope.tabIndex=index;

                }

           });

         </script>

     </body>

 </html>

就是这么简单!你们看懂了吗???

Angular选项卡的更多相关文章

  1. angular的跨域（angular百度下拉提示模拟）和angular选项卡

    1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...

  2. Angular 选项卡

    <div ng-init="now=0;" class="nav"> <h4>选项卡</h4> <div > & ...

  3. （笔记）angular选项卡变色

  4. angular实践第一弹：选项卡开发

    在学习angular的过程中,实践是最好的方法. 在开发选项卡的过程中,不需要再像jquery一样以DOM操作为核心,那什么样的情况是以DOM操作为核心的Jquery的思想呢? 一想到改变什么,就想设 ...

  5. 用angular制作简单的选项卡

    现在angular变得挺火热的,自己也去简单的学习了一下,学了几天下来觉得angular果然好用,但是现在只是停留在比较浅的层面上,要想学好angular还是得下一番功夫的.学了一点新知识就想和大家分 ...

  6. 用angular中的ng-repeat和ng-show来实现tab选项卡

    虽然我们可以用angular中的路由来做tab选项卡,但是那会让我们建立很多的页面来引入,或者建立 <script type="text/ng-template" id=&q ...

  7. Angular页面选项卡切换要注意的toggleClass

    在第一,第二篇随笔中写到的选项卡切换,我回头看了看发现缺少了一个很重要的部分,那就是toggleClass. //在js控制器中必须写明指令,要不然在页面写了toggle-class="ac ...

  8. （笔记）angular 单选选项卡

  9. （笔记）angular material 选项卡用法

随机推荐

  1. eclipse中查看java源码时，出现source not found问题

  2. 快速排序（一） 思想 JAVA实现

    已知数组59.71.37.56.88.96.21.58.48.43 采用快速排序将数组有序. 快速排序同样采用了“分治策略”,使用递归的思路来实现算法. 快速排序的算法思想: 9.71.37.56.8 ...

  3. Gym - 101908G 二分答案+最大流

    After the end of the truck drivers' strike, you and the rest of Nlogônia logistics specialists now h ...

  4. 【转】IntelliJ Idea取消Could not autowire. No beans of 'xxxx' type found的错误提示

    1.问题描述 在Idea的spring工程里,经常会遇到Could not autowire. No beans of 'xxxx' type found的错误提示.但程序的编译和运行都是没有问题的, ...

  5. tornado 03 请求与响应

    tornado 03 请求与响应 一.请求与响应 浏览器与服务器之间沟通的到底是什么信息 #服务器在后台一直保持运行着 #浏览器通过URL(路由.地址)发送请求 #服务器接收请求了通过tornado处 ...

  6. POJ_2431 Expedition 【数据结构】

    一.题面 POJ2431 二.分析 主要说几个坑 1.给出的点需要根据下标排序. 2.根据不同的方式要把起始点或者终点加进去.我没有转换距离,而是直接从起始点到终点根据距离不断相减判断的,那么起点就是 ...

  7. vue 同一个组件的跳转， 返回时保留原来的下拉位置

    1,需求分析 公司的项目有这样一个需求: 同一个list组件,根据传过来的listId渲染成多个页面,每个页面都可以下拉.在返回到不同的list页面时,要保留当时下拉的位置. 说的我自己都有点懵逼了, ...

  8. 【研究】ms17-010永恒之蓝漏洞复现

    1       永恒之蓝漏洞复现(ms17-010) 1.1     漏洞描述: Eternalblue通过TCP端口445和139来利用SMBv1和NBT中的远程代码执行漏洞,恶意代码会扫描开放44 ...

  9. C++ GUI Qt4编程(12)-6.1FindFileDialog

    1. 主要介绍了QGridLayout, QHBoxLayout, QVBoxLayout3种布局管理器的使用方法. 2. 在linux中,继承自QDialog的对话框,没有最大化.最小化.关闭按钮, ...

  10. 搭建Redis报错

    2018-10-26 报错信息 You need tcl 8.5 or newer in order to run the Redis test 原因 缺少 tcl 插件 解决方式 wget http ...