2018-09-02 16:20:08浏览 1097
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta name="keywords" content="关键词1，关键词2，关键词3等等"/> <title>网页选项卡</title> <style type="text/css"> body,ul,li{margin:0; padding:0; list-style:none;} .wrap{width:300px; height:200px; margin:10px auto; border:1px solid #000; padding:10px;} .tab_menu{clear:both; margin-top:10px;} .tab_box{clear:both;} ul li{float:left; width:60px; height:30px; line-height:30px; text-align:center; margin-right:10px; pink;} < /span> .selected{background:#999;} .tab_box div{height:150px; border:1px solid #f00;} .hid{display:none;} .hover{background:#f00;} </style> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ var $div_li=$("div.tab_menu ul li"); $div_li.click(function(){ $(this).addClass("selected") .siblings().removeClass("selected"); var index=$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> <div class="wrap"> <div class="tab_menu"> <ul> <li class="selected">时事</li> <li>体育</li> <li>娱乐</li> </ul> </div> <div class="tab_box"> <div>时事</div> <div class="hid">体育</div> <div class="hid">娱乐</div> </div> </div> </body> </html>