css中选项卡的实现
制作一个简单的选项卡，以供初学者参考；关于css书写的比较粗糙。请见谅
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
*{margin:0;padding:0;}
a{text-decoration:none;}
li{list-style: none;}
#box{
width:510px;
height:400px;
border:2px solid yellow;
}
.content{
width:510px;
height:300px;
overflow:hidden;
}
.a1{
width:510px;
height:300px;
background:#ccc;
display: none;
}
.a2{
width:510px;
height:300px;
background:red;
display:none;
}
.a3{
width:510px;
height:300px;
background:black;
display:none;
}
.a4{
width:510px;
height:300px;
background:blue;
display:none;
}
.a5{
width:510px;
height:300px;
background:#565656;
display:none;
}
.content .active{
display:block;
}
#box-title li{
width:100px;
height:100px;
float:left;
text-align:center;
border:1px solid yellow;
}
</style>
<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<script >
(function($){
$(function(){
var Li=$('#box-title li');
Li.click(function(){
var iIndex=$(this).index();
Li.removeClass('active').eq(iIndex).addClass('active');
$('.content div').removeClass('active').eq(iIndex).addClass('active');
console.log(1);
});
});
})(jQuery);
</script>
</head>
<body>
<div id="box">
<ul id="box-title">
<li class="active">第一部分</li>
<li>第二部分</li>
<li>第三部分</li>
<li>第四部分</li>
<li>第五部分</li>
</ul>
<div class="content">
<div class="a1 active">1</div>
<div class="a2">2</div>
<div class="a3">3</div>
<div class="a4">4</div>
<div class="a5">5</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号