<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>選項卡</title>
<style>
* {
margin: 0;
padding: 0;
}
#uu {
list-style: none;
margin: 0 auto;
width: 850px;
}
#uu li {
width: 200px;
height: 40px;
line-height: 40px;
border: 1px solid black;
float: left;
margin: 5px;
text-align: center;
}
#d2 {
width: 800px;
height: 400px;
border: 1px solid black;
overflow: hidden;
clear: both;
margin: 0 auto;
position: relative;
}
#d2 p {
position: absolute;
top: 0;
left: 0;
}
.btn_in {
background: blue;
}
.ll {
background-color: lightgreen;
}
.p1 {
display: none;
}
.sho {
display: block;
}
</style>
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("Deom", ["$scope", function($scope) {
$scope.selected = 0;//默認選中第一個
$scope.list = [{title:"列表一"},{title:"列表二"},{title:"列表三"},{title:"列表四"}];
$scope.text = ["第一", "第二", "第三", "第四"];
$scope.show = function(i) {
$scope.selected = i;
}
}]);
</script>
</head>
<body ng-app="myApp">
<div ng-controller="Deom">
<ul id="uu" ng-repeat="t in list"><!--重複-->
<!--ng-click="show($index)"切換選中的選項卡-->
<li ng-class="{ll: $index==selected}" ng-click="show($index)">{{t.title}}</li>
</ul>
<div id="d2">
<p ng-repeat="c in text" class="p1" ng-class="{sho: $index==selected}">
{{c}}
</p>
</div>
</div>
</body>
</html>
Anglar js選項卡
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章