jQuery简单实现网页选项卡特效
CSS：
.clear{clear:both;height:0px;overflow:hidden;}
.tab{width:400px;font-size:12px;}
.tab_menuul{padding:0px;margin:0px;}
.tab_menuli{list-style:none;display:block;float:left;
background:#C2CEFE;height:22px;line-height:22px;
padding:0px8px;margin-right:6px;border:#86B4CA1pxsolid;
}
.box{width:400px;height:200px;overflow:hidden;border:#A8C9D91pxsolid;padding:10px8px;}
.tab_menuulli.selected{background:#dadada;cursor:pointer;}
.hide{display:none;}
jQuery：
$(function(){
var$menu_li=$("div.tab_menuulli"); //选取网页选项卡
$menu_li.click(function(){
$(this).addClass("selected")//当前<li>高亮
.siblings().removeClass("selected");//去掉其它同辈<li>的高亮
varindex=$menu_li.index($(this));//找到<li>子节点的索引
$("div.tab_box>div").eq(index).show()//索引为N的DIV显示出来
.siblings().hide(); //其它的选项卡隐藏
})
})
html：
<divclass="tab">
<divclass="tab_menu">
<ul>
<liclass="selected">个人信息</li>
<liclass="selected">我的照片</li>
<liclass="selected">我的博客</li>
<divclass="clear"></div>
</ul>
</div>
<divclass="tab_box">
<divclass="box">我的QQ:123456</div>
<divclass="boxhide">hi</div>
<divclass="boxhide">hello<br></div>
</div>
</div>