众所周知，现在的各大网站上，选项卡即Tab页签的效果遍地都是，在开发过程中根据个人习惯对其进行了封装，具体使用方法怎么描述才准确呢，如果你严格按我的案例的布局进行设置，则你的页面中引用此插件后不用你再写一行代码，不再多说了，上源码。
源码：
(function($) {
var $tabtitle = $('.tabtitle');
//自动隐藏非active项
$tabtitle.each(function(){
var i=$(this).find('.active').index();
$(this).next().find('li').eq(i).show().siblings().hide();
});
$tabtitle.on('click', 'li', function() {
var i = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$(this).closest('.tabtitle').next().find('li').eq(i).show().siblings().hide();
});
})(jQuery);
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡案例</title>
<style type="text/css">
*{
font-family: "microsoft yahei";
margin: 0;
padding: 0;
}
.tabs{
width: 500px;
height: 150px;
margin: 50px auto;
}
.tabtitle{
width: 100%;
height: 40px;
line-height: 40px;
clear: both;
overflow: hidden;
}
.tabtitle li{
font-size: 16px;
text-align: center;
text-decoration: none;
color: #000000;
min-width: 76px;
height: 100%;
padding: 0 12px;
background: #EEEEEE;
float: left;
margin-right: 1px;
list-style: none;
cursor: pointer;
}
.tabtitle li:hover,.tabtitle .active{
color: #ffffff;
background: #00A750;
}
.tabContent{
color: #FFFFFF;
width: 100%;
height: 100px;
border: 1px solid #EEEEEE;
overflow: hidden;
}
.tabContent li{
font-size: 14px;
color: #000000;
width: 100%;
height: 100%;
padding: 10px;
background: #FFFFFF;
overflow: hidden;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="tabs">
<div class="tabtitle">
<ul>
<li class="active">我的好友</li>
<li>陌生人</li>
<li>黑名单</li>
</ul>
</div>
<div class="tabContent">
<ul>
<li>我的好友：URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。</li>
<li>陌生人：E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法</li>
<li>这里是黑名单的内容！！</li>
</ul>
</div>
</div>
<div class="tabs">
<div class="tabtitle">
<ul>
<li class="active">我的好友</li>
<li>陌生人</li>
<li>黑名单</li>
</ul>
</div>
<div class="tabContent">
<ul>
<li>我的好友：URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。</li>
<li>陌生人：E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法</li>
<li>这里是黑名单的内容！！</li>
</ul>
</div>
</div>
<div class="tabs">
<div class="tabtitle">
<ul>
<li class="active">我的好友</li>
<li>陌生人</li>
<li>黑名单</li>
</ul>
</div>
<div class="tabContent">
<ul>
<li>我的好友：URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。</li>
<li>陌生人：E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法</li>
<li>这里是黑名单的内容！！</li>
</ul>
</div>
</div>
<script src="../js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.tab.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
如果不用js呢，你不怕用太多的id，照样可以实现一款tab效果，具体代码如下：
<!DOCTYPE html>效果图如下：
<html>
<head>
<meta charset="utf-8">
<title>:target选项卡</title>
<style type="text/css">
*{
font-family: "microsoft yahei";
margin: 0;
padding: 0;
}
#tabs{
width: 500px;
height: 400px;
margin: 50px auto;
}
.tabTitle{
width: 100%;
height: 40px;
line-height: 40px;
clear: both;
overflow: hidden;
}
.tabTitle > a{
font-size: 16px;
text-align: center;
text-decoration: none;
color: #000000;
min-width: 76px;
height: 100%;
padding: 0 12px;
background: #EEEEEE;
display: block;
float: left;
margin-right: 1px;
}
.tabTitle > a:hover{
color: #ffffff;
background: #00A750;
}
.tabContent{
word-break: break-all;
color: #FFFFFF;
width: 100%;
height: 100px;
border: 1px solid #EEEEEE;
overflow: hidden;
}
.tabContent > div{
font-size: 14px;
width: 100%;
height: 100%;
padding: 10px;
background: #FFFFFF;
overflow: hidden;
box-sizing: border-box;
z-index: 1;
}
.tabContent > div:nth-child(1),.tabTitle > a:nth-child(1){
background: lightsalmon;
}
.tabContent > div:nth-child(2),.tabTitle > a:nth-child(2){
background: lightpink;
}
.tabContent > div:nth-child(3),.tabTitle > a:nth-child(3){
background: goldenrod;
}
:target{
z-index: 2;
}
</style>
</head>
<body>
<div id="tabs">
<div class="tabTitle">
<a href="#tab1">我的好友</a>
<a href="#tab2">陌生人</a>
<a href="#tab3">黑名单</a>
</div>
<div class="tabContent">
<div id="tab1">我的好友：URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。</div>
<div id="tab2">陌生人：E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法</div>
<div id="tab3">这里是黑名单的内容！！</div>
</div>
</div>
</body>
</html>
