用angular制作简单的选项卡

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

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

用angular制作简单的选项卡

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

<!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,大家可以自己去试一试,有什么不懂的大家可以提出来,让我们一起学习、交流!

上一篇:VBC#代码互转工具


下一篇:VUE3 之 生命周期函数