<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>tab选项卡</title> <script src="jquery.js"></script> <script> $(function(){ var ali = $('.tabTitle ul li'); var aDiv = $('.tabContent div'); var timeId = null; ali.mouseover(function() { //setTimeout()的作用是延迟某一段代码的执行 var _this = $(this); timeId = setTimeout(function(){ var index = _this.index(); _this.addClass('current').siblings().removeClass('current'); aDiv.eq(index).show().siblings().hide(); },300); }).mouseout(function(){ //clearTimeout的作用是清除定时器 clearTimeout(timeId); }); }); </script> <style> *{padding:0;margin:0;} body{margin:50px;} li{list-style: none;} .tabTitle ul{overflow: hidden;_height:1px;} .tabTitle ul li{float:left; border:1px solid #abcdef; height: 30px; line-height: 30px; padding:0 15px; margin-right:3px; cursor:pointer;} .tabContent div{border:1px solid #f60; width: 300px; height: 100px; padding:10px;} .hide{display: none;} .current{background: #abcdef; color: #fff;} </style> </head> <body> <!-- 这里是标签标题 --> <div class="tabTitle"> <ul> <li class="current">xhtml</li> <li>css</li> <li>jquery</li> </ul> </div> <!-- 这里是内容 --> <div class="tabContent"> <div>xhtml的内容</div> <div class="hide">css的内容</div> <div class="hide">jQuery的内容</div> </div> </body> </html>