一个标签页的小实例:
tab.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery实例:标签页效果</title>
<link type="text/css" rel="stylesheet" href="css/tab.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
</head>
<body>
<ul id="tabfirst">
<li class="tabin">标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<div class="contentfirst">我是内容1</div>
<div class="contentfirst">我是内容2</div>
<div class="contentfirst">我是内容3</div>
</body>
</html>
tab.css:
ul,li {
margin :0;
padding:0;
list-style:none;
}
#tabfirst li {
float:left;
background-color:#868686;
color:white;
padding:5px;
margin-right:2px;
border:1px solid white;
cursor:pointer;
}
#tabfirst li.tabin {
background-color:#6E6E6E;
border:1px solid #6E6E6E;
}
div.contentfirst {
clear:left;
background-color:#6E6E6E;
color:white;
width:300px;
height:100px;
padding:10px;
display:none;
}
div.contentin {
display:block;
}
tab.js:
var timeoutid;
$(document).ready(function () {
$("#tabfirst li").each(function (index) {
//每一个包装li的jQuery对象都会执行function中的代码;
//index是当前执行这个function代码的li对应在所有li组成的数组中的索引值;
//有了index的值之后,就可以找到当前标签对应的内容区域
$(this).mouseover(function () {
var liNode = $(this);
timeoutid=setTimeout(function () {
//将原来现实的内容区域进行隐藏
$("div.contentin").removeClass("contentin");
//对有tabin的class定义的li清除tabin的class
$("#tabfirst li.tabin").removeClass("tabin");
//当前标签所对应的内容区域显示出来:
//$("div").eq(index).addClass("contentin");
//或者:
$("div.contentfirst:eq(" + index + ")").addClass("contentin");
$(liNode).addClass("tabin");
}, 100);
}).mouseout(function () {
clearTimeout(timeoutid);
});
});
});
效果如下: