<!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>
