选项卡
2017-10-31 本文已影响0人
z_j_r
前言：
蝴蝶如要在百花园里得到飞舞的欢乐，那首先得忍受与蛹决裂的痛苦
--------------------------------正文---------------------------------
js代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box input{
background: #ccc;
}
.box input.active{
background: #f90;
}
.box div{
width: 200px;
height: 200px;
background: #ccc;
display: none;
}
.box div.active{
display: block;
}
</style>
<script>
window.onload = function(){
function slider(id,sEv){
var oTab = document.getElementById(id);
var aBtn = oTab.getElementsByTagName('input');
var aDiv = oTab.getElementsByTagName('div');
for(var i=0;i<aBtn.length;i++){
aBtn[i].index = i;
aBtn[i][sEv] = function(){
for(var i=0;i<aBtn.length;i++){
aBtn[i].className = '';
aDiv[i].className = '';
}
this.className = 'active';
aDiv[this.index].className = 'active';
};
}
}
slider('tab','onclick');
slider('tab2','onmouseover');
};
</script>
</head>
<body>
<div id="tab" class="box">
<input type="button" value="科技" class="active" />
<input type="button" value="娱乐" />
<input type="button" value="军事" />
<div class="active">科技的内容</div>
<div>娱乐的内容</div>
<div>军事的内容</div>
</div>
<div id="tab2" class="box">
<input type="button" value="呵呵" class="active" />
<input type="button" value="呵呵2" />
<input type="button" value="呵呵3" />
<div class="active">111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
jquery代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.tab{
width: 200px;
}
.tab input{
background: #ccc;
}
.tab input.active{
background: #f90;
}
.tab div{
width: 200px;
height: 200px;
background: #ccc;
display: none;
}
.tab div.on{
display: block;
}
</style>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/cookie.js"></script>
</head>
<body>
<div class="tab">
<input type="button" value="aaa" class="active" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div class="on">111</div>
<div>222</div>
<div>333</div>
</div>
<script>
$(document).ready(function(){
$('.tab').on('click','input',function(){
iNow = $(this).index();
changeTab();
});
function changeTab(){
$('.tab input').siblings('input').removeClass('active');
$('.tab input').eq(iNow).addClass('active');
$('.tab div').removeClass('on');
$('.tab div').eq(iNow).addClass('on');
}
});
</script>
</body>
</html>
