下面我给大家介绍几种选项卡的例子与写法：
第一种--三目运算选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app>
<div class="wrap" ng-init="now=0">
<p>
<span ng-click="now=0" class="{{now==0 ? 'on' : ''}}">娱乐</span>
<span ng-click="now=1" class="{{now==1 ? 'on' : ''}}">体育</span>
<span ng-click="now=2" class="{{now==2 ? 'on' : ''}}">影视</span>
</p>
<div ng-show="now==0">娱乐</div>
<div ng-show="now==1">体育</div>
<div ng-show="now==2">影视</div>
</div>
<script src="js/angular.min.js"></script>
</script>
</body>
</html>
第二种--angualr选项卡
<!DOCTYPE html> <html ng-app="mk"> <head> <meta charset="UTF-8"> <title></title> </head> <body ng-controller="test"> <div id="box"> <p> <span ng-repeat="item in arr" ng-click = "show($index)">{{item.name}}</span> </p> <div ng-repeat = "item in arr" ng-show = "now == $index">{{item.content}}</div> </div> <script src="js/angular.min.js"></script> <script> var app = angular.module("mk",[]); app.controller("test",function($scope){ $scope.now = 0; $scope.arr = [ {"name":"tab1","content":"content1"}, {"name":"tab2","content":"content2"}, {"name":"tab3","content":"content3"} ] $scope.show = function(n){ $scope.now = n; } }) </script> </body> </html>
第三种--angular路由选项卡
<!DOCTYPE html> <html ng-app="mk"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li><a href="#/index">首页</a></li> <li><a href="#/news">新闻</a></li> </ul> <div ng-view></div> <script type="text/ng-template" id="nav"> <ul> <li>这是首页内容</li> </ul> </script> <script type="text/ng-template" id="news"> <ul> <li>这是新闻内容</li> </ul> </script> <script src="js/angular.min.js"></script> <script src="js/angular-route.js"></script> <script type="text/javascript"> var app = angular.module("mk",['ngRoute']); app.config(function($routeProvider){ $routeProvider.when('/index',{ templateUrl:'nav' }).when('/news',{ templateUrl:'news' }).otherwise({ //默认显示哪个页面 redirectTo:"index" }); }); </script> </body> </html>
第四种--jQ选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
#box {
300px;
height: 300px;
border: 1px solid #000;
margin: 50px auto;
}
#box p {
300px;
border-bottom: 1px solid #000000;
height: 30px;
display: flex;
line-height: 30px;
}
#box p span {
100px;
text-align: center;
border: 1px solid red;
}
#box .x {
text-align: center;
line-height: 200px;
display: none;
}
</style>
</head>
<body>
<div id="box">
<p>
<span class="dd" style="background: red;color: white;">1111</span>
<span class="dd">2222</span>
<span class="dd">3333</span>
</p>
<div>
<div class="x" style="display: block;">index1</div>
<div class="x">index2</div>
<div class="x">index3</div>
</div>
</div>
<script src="js/cookie.js"></script>
<script src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
window.onload = function() {
$(".x").eq(getCookie("index")).show().siblings().hide();
$(".dd").eq(getCookie("index")).css({
"background": "red",
"color": "white"
}).siblings().css({
"background": "white",
"color": "black"
})
$(".dd").on("click", function(e) {
e.preventDefault();
var inde = $(this).index();
$(".x").eq(inde).show().siblings().hide();
$(".dd").eq(inde).css({
"background": "red",
"color": "white"
}).siblings().css({
"background": "white",
"color": "black"
})
setCookie("index", inde, 4);
});
}
</script>
</body>
</html>
第五种--ui-router路由选项卡
<!DOCTYPE html> <html ng-app="mk"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div ui-view></div> <script src="angular/angular.min.js"></script> <script src="angular/angular-ui-route.js"></script> <script type="text/javascript"> var app = angular.module("mk",["ui.router"]); app.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.when("", "pageTab/tab1"); $stateProvider.state("pageTab", { url: '/pageTab', templateUrl: 'pageTab.html' }).state('pageTab.tab1', { url: "/tab1", templateUrl: 'tab1.html' }).state('pageTab.tab2', { url: '/tab2', templateUrl: 'tab2.html' }).state('pageTab.tab3', { url: '/tab3', templateUrl: 'tab3.html' }); }); </script> </body> </html>
在写一个html模块
<div class="footer">
<a href="#/tab1" style="padding-right: 20px;" ui-sref=".tab1">tab1</a>
<a href="#/tab2" style="padding-right: 20px;" ui-sref=".tab2">tab2</a>
<a href="#/tab3" style="padding-right: 20px;" ui-sref=".tab3">tab3</a>
<div ui-view></div>
</div>
以上的就是五种选项卡的写法，希望对大家有所帮助！