标签：
选项卡在网站中是非常常用的，我们一起来学学吧
原理：点击标题的时候，显示对应的内容，就控制元素的显示隐藏就可以
1.html结构
<div class="tab"> <!-- 标题 --> <ul class="tab_tit"> <li class="red"><a href="#"></a></li> <li class="blue"><a href="#"></a></li> <li class="green"><a href="#"></a></li> </ul> <!-- 内容 --> <ul class="tab_cont"> <li class="red"><a href="#"></a></li> <li class="blue"><a href="#"></a></li> <li class="green"><a href="#"></a></li> </ul> </div>
先清除一下默认样式
.tab{width:300px;height:250px;} .tab_tit{height:30px;background:#ccc;}
.tab_cont li{height:220px;}
.red{background:red;} .blue{background:blue;} .green{background:green;}
现在的样子
我们清楚一下默认样式
body,ul,li{margin:0;padding:0;} li{list-style:none;}
现在只需要用jquery来控制点击标题来显示对应的块了
$(function(){ //显示第一个内容 $(‘.tab-cont ul:first‘).show(); //点击标题，显示对应的内容 //获取第几个 $(‘.tab_tit li‘).click(function() { var $inde = $(this).index(); alert($inde); $(‘.tab-cont li‘).eq($inde).show().siblings(‘li‘).hide(); }); });
标签：
原文地址：http://www.cnblogs.com/kPedestrian/p/4444139.html
