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>
热门推荐
10 对患者生日祝福语简短
11 结婚祝福语简短装备
12 周岁祝福语学生文案简短
13 订婚领证祝福语简短精辟
14 导师获奖祝福语大全简短
15 新婚购房祝福语简短精辟
16 牛年祝福语简短的爱人
17 送芒果的祝福语简短
18 送给学长毕业祝福语简短