<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页选项卡</title> <style> *{ margin:0; padding:0;} body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;} .tab { width:440px;margin:50px;} .tab_menu { clear:both;} .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;} .tab_menu li.hover { background:#DFDFDF;} .tab_menu li.selected { color:#FFF; background:#6D84B4;} .tab_box { clear:both; border:1px solid #898989; height:100px;} .hide{display:none} </style> </head> <body> <div class="tab"> <div class="tab_menu"> <ul> <li class="selected">实事</li> <li>体育</li> <li>娱乐</li> </ul> </div> <div class="tab_box"> <div>实事</div> <div class="hide">体育</div> <div class="hide">娱乐</div> </div> </div> <script src="js/jquery.js"></script> <script> //为li元素绑定单击事件 var $div_li=$("div .tab_menu ul li"); $div_li.click(function(){ $(this).addClass("selected")//当前单击的li元素高亮 .siblings().removeClass("selected");//去掉其他同辈li元素的高亮 var index=$div_li.index(this);//获取当前单击<li>元素在全部<li>元素中的索引 $("div .tab_box>div")//选择子节点 .eq(index).show()//显示<li>元素对应的<div>元素 .siblings().hide();//隐藏其他几个同辈的<div>元素 }).hover(function(){ $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }) </script> </body> </html>