核心提示：jQ选项卡：!DOCTYPE htmlhtmlhead lang=enmeta charset=UTF-8title/titlestyle*{margin:0;padding:0;}ul,li{lis...
jQ选项卡：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
ul,li{list-style: none;display: block;}
.clearfix:after{height:0;display: block;clear: both;content: "";}
.type{width:450px;margin:50px auto;border:1px solid #000001;margin-bottom: 5px;}
.type ul li{width:100px;float: left;margin-right: 10px;text-align:center;background:#ccc;height:30px;line-height: 30px;cursor: pointer;}
.show{display:block !important;}
.active{background: red!important;}
.content{width:450px;margin:0 auto;border:1px solid #000001;height:400px;overflow: hidden;}
.content p{display: none;height:400px;line-height: 400px;text-align: center;}
</style>
<script src="js/jquery.js"></script>
</head>
<body>
<p class="type">
<ul class="clearfix">
<li class="active">新闻</li>
<li>娱乐</li>
<li>社会</li>
<li>生活</li>
</ul>
</p>
<p class="content">
<p class="show">新闻内容</p>
<p>娱乐内容</p>
<p>社会内容</p>
<p>生活内容</p>
</p>
<script>
$(document).ready(function(){
$("li").click(function(){
//给当前对象添加类名 它的兄弟们移除类名
$(this).addClass("active").siblings("li").removeClass("active");
// 保存当前点击对象的索引值
var x=$(this).index();
// eq(x) 除x以外
$("p:eq("+x+")").addClass("show").siblings("p").removeClass("show");
})
})
</script>
</body>
