<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><metahttp-equiv="content-type"content="text/html;charset=utf-8"/><metaname="keywords"content="关键词1，关键词2，关键词3等等"/><title>网页选项卡</title><styletype="text/css">body,ul,li{margin:0;padding:0;list-style:none;}.wrap{width:300px;height:200px;margin:10pxauto;border:1pxsolid#000;padding:10px;}.tab_menu{clear:both;margin-top:10px;}.tab_box{clear:both;}ulli{float:left;width:60px;height:30px;line-height:30px;text-align:center;margin-right:10px;pink;}< /span>.selected{background:#999;}.tab_boxdiv{height:150px;border:1pxsolid#f00;}.hid{display:none;}.hover{background:#f00;}</style><scripttype="text/javascript"src="jquery-1.7.2.min.js"></script><scripttype="text/javascript">$(function(){var$div_li=$("div.tab_menuulli");$div_li.click(function(){$(this).addClass("selected").siblings().removeClass("selected");varindex=$div_li.index(this);//获取当前单击的li在全部li中的索引$("div.tab_box>div").eq(index).show()//显示li元素对应的div元素.siblings().hide();}).hover(function(){//添加鼠标划入划出效果$(this).addClass("hover");},function(){$(this).removeClass("hover");})})</script></head><body><divclass="wrap"><divclass="tab_menu"><ul><liclass="selected">时事</li><li>体育</li><li>娱乐</li></ul></div><divclass="tab_box"><div>时事</div><divclass="hid">体育</div><divclass="hid">娱乐</div></div></div></body></html>