angularJs-Tab切换

来源：互联网发布：vb里的option 编辑：程序博客网时间：2024/06/16 15:31

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>

阅读全文

0 0