现在angular变得挺火热的，自己也去简单的学习了一下，学了几天下来觉得angular果然好用，但是现在只是停留在比较浅的层面上，要想学好angular还是得下一番功夫的。学了一点新知识就想和大家分享，今天就分享一个小小的Demo，希望大家都能喜欢。

先给大家上静态效果图吧：

点击上面的标题可以切换到相应的选项卡，接下来直接上代码吧：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.1.5.6.js" ></script>//连接angular库

　　//简单样式部分
        <style>
            #tab{display: flex;}
            #tab div{
                flex: 1;
                text-align: center;
                line-height: 40px;
                background: sandybrown;
                color: #fff;
                font-size: 18px;
                font-family: "微软雅黑";
            }
            .list{
                flex: 1;
                height: 200px;
                border: 1px solid #ccc;
                border-top: none;
                line-height: 40px;
                text-align: center;
                padding: 20px;
                background: #F1F1F1;
            }
            .atv{
                border-bottom: 3px solid chocolate;
            }
        </style>

　　　　//angular代码部分
        <script>
            var app = angular.module('tabsApp',[]);//定义模块
            app.controller('indexCtrl',function($scope){//定义控制器
                $scope.name = 'abc';
                $scope.page1 = true;
                $scope.page2 = false;
                $scope.page3 = false;
                $scope.show = function(page){
                    console.log(page);
                    if(page==1){
                        $scope.page1 = true;
                        $scope.page2 = false;
                        $scope.page3 = false;
                    }else if(page==2){
                        $scope.page1 = false;
                        $scope.page2 = true;
                        $scope.page3 = false;
                    }else if(page==3){
                        $scope.page1 = false;
                        $scope.page2 = false;
                        $scope.page3 = true;
                    }
                }
            });
        </script>
    </head>
    <body ng-app="tabsApp">//绑定模块
        <div ng-controller="indexCtrl">//绑定控制器
            <!--<p>{{name}}</p>-->
            <div>
                <div id="tab">
                    <div ng-click="show(1)" class="{{page1?'atv':''}}">什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？</div>
                    <div ng-click="show(2)" class="{{page2?'atv':''}}">doctype（文档类型）的作用是什么？你知道多少种文档类型？</div>
                    <div ng-click="show(3)" class="{{page3?'atv':''}}">解释下浮动和它的工作原理。</div>
                </div>
                <div ng-show="page1" class="list">
                    FOUC(Flash Of Unstyled Content)–文档样式闪烁
                    而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，
                    然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间
                    页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。解决方法简单的出奇，
                    只要在之间加入一个或者script元素就可以了。
                </div>
                <div ng-show="page2" class="list">
                    此标签可告知浏览器文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型，
                    分别表示严格版本、过渡版本以及基于框架的HTML文档。
                    HTML 4.01规定了三种文档类型：Strict、Transitional以及Frameset。
                    XHTML 1.0规定了三种XML文档类型：Strict、Transitional以及Frameset。
                    Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，
                    而Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
                </div>
                <div ng-show="page3" class="list">
                    关于浮动我们需要了解，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
                    要想使元素浮动，必须为元素设置一个宽度（width）。虽然浮动元素不是文档流之中，
                    但是它浮动后所处的位置依然是在浮动之前的水平方向上。由于浮动框不在文档的普通流中，
                    所以文档的普通流中的块框表现得就像浮动框不存在一样，下面的元素填补原来的位置。有些元素会在浮动元素的下方，
                    但是这些元素的内容并不一定会被浮动的元素所遮盖，对内联元素进行定位时，这些元素会考虑浮动元素的边界，
                    会围绕着浮动元素放置。也可以把浮动元素想象成是被块元素忽略的元素，而内联元素会关注浮动元素的。
                </div>
            </div>
        </div>
    </body>
</html>

就是这样一个小的demo，大家可以自己去试一试，有什么不懂的大家可以提出来，让我们一起学习、交流！

用angular制作简单的选项卡的更多相关文章

  1. Jquery简单的选项卡实现

    概述 原来对jQuery用的不是很多,主要就是表单验证这些部分,最近想要更深入的学习jQuery和JavaScript编码,就找来了一些视频进行学习,然后就做了这个简单的选项卡示例.视频学习地址见最后 ...

  2. 3.2 配置构建Angular应用——简单的笔记存储应用

    本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...

  3. JS入门学习，写一个简单的选项卡

    /* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById('');    一定要多输,熟悉后o u什么的字母别搞 ...

  4. Highcharts使用教程（1）：制作简单图表

    今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧. 步骤一 在网页中添加一个div.设置id,设置图表长.高.代码如 ...

  5. ZAM 3D 制作简单的3D字幕 流程(二)

    原地址:http://www.cnblogs.com/yk250/p/5663907.html 文中表述仅为本人理解,若有偏差和错误请指正! 接着 ZAM 3D 制作简单的3D字幕 流程(一) .本篇 ...

  6. phalcon: eventManager事件管理（结合dispatcher调度控制器）制作简单的acl

    制作简单的acl, dispatcher(专门用来加载或调度或跳转到相应的url地址即XXXcontroller的调度器或控制器,能够在controller执行前对controller进行停止跳转等) ...

  7. canvas制作简单动画

    在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1．自定义一个函数,用于图形的移动或其他动作. 2．使用setIn ...

  8. JSP制作简单登陆

    JSP制作简单登陆界面 运行环境 eclipse+tomcat+MySQL 不知道的可以参考Jsp运行环境--Tomcat 项目列表 这里我先把jsp文件先放在Web-INF外面访问 需要建立的几个文 ...

  9. Photoshop 基础三 制作简单按钮

    要求知识点:移动工具.选择工具.套索工具.多边行工具.文本工具.路径选择工具.裁剪.填充 一.制作简单按钮 1)新建画布,大小随便 2)画圆角矩形工具(同时定义背景色.边框是否需求.边框颜色) 3)打 ...

随机推荐

  1. 为什么打开fiddler电脑就不能上网，关了就能正常打开了呢？

    因为打开fiddler是它修改浏览器走代理服务器,关掉fiddler之后,代理服务器已经关闭了.但是,但是浏览器的代理模式还没改回来,就是说浏览器还要通过代理访问站点,然而代理服务器已经没有了.打开浏 ...

  2. getBoundingClientRect获取元素在页面上的位置

    getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置. getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起 ...

  3. 左手是“Python”的身体，右手是“R”的灵魂，你爱哪个？

    来源商业新知网,原标题:你爱 “Python”的身体,还是“R”的灵魂? 数据科学界有三大宝: Python.SAS和R,不过像SAS这种高端物种,不是我们这些平民能供养得起的啊. 根据 IEEE S ...

  4. CentOS 6.8下网卡配置、桥接模式和NAT连接模式、VMware虚拟机克隆网卡配置

    模式一:桥接模式: 1. 在VMware中安装好虚拟机后,虚拟机网卡设置:选择桥接模式 2. 查看本机的网络信息: 找到ip.子网掩码.网关.DNS等. 找一个没有使用的ip,例如:192.168.1 ...

  5. OOP的概念和基础特性

    OOP是面对对象程序设计,是一种程序设计范型,同时也是一种程序开发方法.它将对象作为程序的基本单元,将程序和数据封装其中,以提高程序的复用性.灵活性.可扩展行. OOP的核心思想是对象.封装.可复用性 ...

  6. centos7 安装 transmission

    貌似官方文档 注意:是centos7才能用此方法 Step 1. First, you need to enable EPEL repository on your system. yum insta ...

  7. PowerScript数据类型及变量

    PowerBuilder的标准数据类型共有14种 数据类型 意    义 示    例 Blob 二进制数据 可存放可变长度的大量数据,如图片,其它类型的文档数据. 如保存位图 Boolean 布尔型 ...

  8. 19-04【mysql】transaction，autocommit

    本地使用mysql测试结果如下, 没有使用start transaction的情况下: 如果set autocommit=1,则每一条语句默认提交: 如果set autocommit=0,则这条语句默 ...

  9. IDEA中常用的maven指令

    Maven库: http://repo2.maven.org/maven2/ Maven依赖查询: http://mvnrepository.com/ Maven常用命令:  1. 创建Maven的普 ...

  10. 基于服务器的AAA配置实验（Cisco PT）

    一.实验拓扑 二.网络地址分配 Device Interface IP Address Subnet Mask R1 Fa0/0 192.168.1.1 255.255.255.0 S0/0/0 10 ...