标签：
jq中选项卡很简单，的注意是他结构命名（网上有很多，其中不乏不规范）
1.tab
2.tab-hd (选项栏)
3.tab-bd（选项栏对应的内容）
css代码（布局没问题，可以只看jquery代码）
*{padding: 0; margin: 0;}
ul {list-style: none; }
.tab {width:450px; height:200px; overflow: hidden; border:1px solid #ccc; margin: 0 auto; }
.tab-hd ul { overflow: hidden; margin-left: -4px; }
.tab-hd li { float:left; width: 150px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc; line-height: 50px; font-size: 24px; text-align: center; cursor:pointer;}
.tab-hd li.selected {border-bottom:none;}
.tab-bd li { display: none; font-size: 30px; line-height: 5; text-align: center; }
html代码：
<div class="tab"> <div class="tab-hd"> <ul> <li class="selected">项目一</li> <li>项目二</li> <li>项目三</li> </ul> </div> <div class="tab-bd"> <ul> <li style="display:block;">111111</li> <li>222222</li> <li>333333</li> </ul> </div> </div>
jq代码：
$(function(){
$(‘.tab-hd li‘).click(function(){
$(this).addClass(‘selected‘).siblings().removeClass(‘selected‘);//这个可写成下面代码
/*
$(‘.tab-hd li‘).removeClass(‘selected‘);
$(this).addClass(‘selected‘);
*/
$(‘.tab-bd li‘).hide().eq($(this).index()).show();
}).hover(function(){
//可以加其他动画效果
});
})
标签：
原文地址：http://www.cnblogs.com/liangcheng11/p/5159533.html
