tab切换效果（点击导航栏切换显示内容）
程序员文章站
2024-03-21 11:22:34
...
效果展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../jQuery/jquery-1.8.3.min.js"></script>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.cons{
width: 1200px;
position: relative;
left: 50%;
margin-left: -600px;
}
.nav{
width: 900px;
height: 70px;
}
ul{
list-style-type: none;
width: 900px;
height: 70px;
}
ul>li{
width: 300px;
height: 70px;
float: left;
}
ul>li>h3{
width: 300px;
height: 70px;
line-height: 70px;
text-align: center;
background-color: #00AAAA;
color: #FFFFFF;
}
ul>li>div{
width: 1196px;
height: 500px;
position: absolute;
left: 0px;
background-color: #4169E1;
display: none;
}
</style>
</head>
<body>
<div class="cons">
<div class="nav">
<ul>
<li>
<h3>111</h3>
<div>
div1
</div>
</li>
<li>
<h3>222</h3>
<div>
div2
</div>
</li>
<li>
<h3>333</h3>
<div>
div3
</div>
</li>
</ul>
</div>
</div>
<script>
$(function(){
$("ul>li").click(function(){
$(this).children("h3").css("background","#620816").end().children("div").css("display","block");
$(this).siblings().children("h3").css("background","#00AAAA").end().children("div").css("display","none");
})
})
</script>
</body>
</html>