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>