一个简单的jqtab页面
<!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"><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="css/demo2.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/demo2.js"></script></head><body> <ul> <li class="tabin">标签一</li> <li>标签二</li> <li>标签三</li> </ul> <div class="contentin">我是内容区一</div> <div>我是内容区二</div> <div>我是内容区三</div></body></html>ul,li{ margin:0; padding:0; list-style:none; margin-left:5px;}li{ float:left; background-color:#868686; color:white; padding:5px; margin-right:2px; border:1px solid white;}li.tabin{ background-color:#616161; border:1px solid #616161;}div{ clear:left; background-color:#616161; color:white; width:300px; height:100px; padding:10px; display:none;}div.contentin{ display:block;}
var timeid;$(function(){ $('li').each(function(index){ var liNode = $(this); var divNode = $('div'); liNode.mouseover(function(){ timeid = setTimeout(function(){ $('li.tabin').removeClass('tabin'); $('div.contentin').removeClass('contentin'); liNode.addClass('tabin'); //这里有些问题，我的FF是3.5版本以上 if($.browser.mozilla){ divNode.eq(index+1).addClass('contentin'); }else{ divNode.eq(index).addClass('contentin'); } },300); }).mouseout(function(){ clearTimeout(timeid); }); })});
页:
[1]