HTML+CSS+jQuery+JavaScript实现选项卡功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a{
width: 410px;
height: 80px;
border:1px solid red;
}
.x{
width: 40px;
height: 40px;
border:1px solid red;
text-align: center;
line-height: 40px;
float: left;
margin-top: 20px;
margin: 20px 30px 0 30px;
}
#b{
width: 410px;
height: 400px;
border:1px solid red;
position: relative;
}
.n{
width: 410px;
height: 400px;
border:1px solid red;
position: absolute;
top: 0;
left: 0;
display: none;
}
.xs{
display: inline;
}
</style>
</head>
<body>
<div id="a">
<div class="x z0">1</div>
<div class="x z1">2</div>
<div class="x z2">3</div>
<div class="x z3">4</div>
</div>
<div id="b">
<div class="n r0 xs">内容1</div>
<div class="n r1">内容2</div>
<div class="n r2">内容3</div>
<div class="n r3">内容4</div>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(".x").each(function(i){
$(this).click(function(){
$(".x").css("border-bottom","1px solid red")
$($(".z"+[i])).css("border-bottom","5px solid red")
})
$(this).click(function(){
$(".n").removeClass("xs")
$($(".r"+[i])).addClass("xs")
})
})
</script>
</body>
</html>
2287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
