angularJs-Tab切换

最新推荐文章于 2021-11-04 17:25:09 发布

Charles_pig

最新推荐文章于 2021-11-04 17:25:09 发布

阅读量970

点赞数

分类专栏： angularJs 文章标签： tab

本文链接：https://blog.csdn.net/charles_pig/article/details/73648413

版权

angularJs 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

tab切换：仅实现功能，css样式较简单

<!doctype html>
<html lang="en" ng-app = "app">
<head>
    <meta charset="UTF-8"/>
    <title>Document</title>
    <style type="text/css">
        .container{
            border: 1px dotted gray;
            width: 300px;
            height: 500px;
            overflow: hidden;
            padding: 15px 0;
        }
        a{
            padding: 5px 15px;
            border: 1px solid gray;

        }
        #tab{
            clear: both;
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div id="tab" ng-controller = "myCtrl">
        <a ui-sref = "top">Top</a>
        <a ui-sref = "my">My</a>
        <a ui-sref = "about">About</a>
    </div>
    <div class="container">
        <div ui-view></div>
    </div>

</body>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="angular-ui-router.min.js"></script>
<script type="text/javascript">
    var app = angular.module("app",["ui.router"]);
    app.controller("myCtrl",function($scope){
    })
    app.config(function($stateProvider,$urlRouterProvider){
        //默认路由；
        $urlRouterProvider.otherwise("/my");
        //定义路由规则；
        $stateProvider
            .state("my",{
                url:"/my",
                templateUrl:"../view/my.html",
            })
            .state("about",{
                url:"/about",
                templateUrl:"../view/about.html",
            })
            .state("top",{
                url:"/top",
                templateUrl:"../view/top.html",
            })

    })
</script>
</html>