<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <script type="text/javascript" src="jq/jquery-1.11.3.min.js"></script> -->
<script type="text/javascript" src="angular/angular-1.5.0.min.js"></script>
<style type="text/css">
*{margin:0; padding:0;}
.item{
font-size: 30px;
padding: 0 10px;
}
.content1{
height: 200px;
width: 300px;
text-align: center;
line-height: 200px;
display: none;
font-size: 30px;
background: #ccc;
}
.bg{
background: #eee;
}
.show{
display: block;
}
</style>
</head>
<body ng-app="app">
<div ng-controller="DemoController">
<span class="item" ng-repeat="item in items" ng-click="show($index)" ng-class="{bg: $index == start }">{{item}}</span>
<div>
<div class="content1" ng-repeat="content in contents" ng-class="{show: $index == start}">
{{content}}
</div>
</div>
</div>
</body>
</html>
<!--选项卡1-->
<script type="text/javascript">
var module = angular.module('app', []);
module.controller('DemoController' ,['$scope', function($scope){
$scope.start = 0;
$scope.contents = ['content1', 'content2', 'content3', 'content4', 'content5'];
$scope.items = ['item1', 'item2', 'item3', 'item4', 'item5'];
$scope.show = function(index){
$scope.start = index;
}
}]);
</script>
<!-- <script type="text/javascript">
//选项卡2
// 比较简单清晰的写法
// $(function(){
// $('.item').click(function(){
// $(this).addClass('bg').siblings().removeClass('bg');
// var index = $(this).index();
// $('.content1').eq(index).show().siblings().hide();
// });
// $('.item').eq(0).trigger('click');
// });
//
// 选项卡3
// 智商不够用
$('.item').each(function(i){
var b = function(i){
var index = i;
var a = function(){
var content = $('.content1').eq(index);
content.show().siblings().hide();
$(this).addClass('bg').siblings().removeClass('bg')
}
return a;
}(i);
$(this).click(b);
});
</script> -->
简单的选项卡(jq/angular)
最新推荐文章于 2022-08-02 15:55:50 发布