JQuery Tab_JQuery竖排页签代码示例
一个使用JQuery1.4.4开发的竖排页签选项卡(Tab)的代码示例，代码完整包已经加在附件中了，希望对大家有帮助：
HTML-Tab.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/JQuery/jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/JQuery/jquery/js/tab.js"></script>
<link href="/JQuery/jquery/css/tab.css" type="text/css" rel="stylesheet">
<title>JQuery竖排页签</title>
</head>
<body>
<div id="container" style="container_style">
<div id="li_area" class="tab_area_style">
??? <div class="content_area">标签1下内容</div>
??? <div>标签2下内容</div>
??? <div>标签3下内容</div>
</div>
</div>
</body>
</html>
?
CSS-tab.css
@CHARSET "UTF-8";
/*清除浏览器默认样式*/
* {
??? margin:0px;
??? padding:0px;
}
.container_style{
??? width:500px;
??? height:170px;
??? display:block;
}
.li_area_style{
??? width:100px;
??? height:70px;
??? background-color:white;
??? float:left;
}
ul,li{
??? margin:0px;
??? padding:0px;
??? list-style:none;
}
li{
??? /*float:right;*/
??? background-color:pink;
??? margin-top:2px;
??? width:100px;
??? padding:5px;
??? border:1px solid white;
??? height:20px;
??? color:white;
}
.listli{
??? background-color:red;
??? border:1px solid red;
}
.tab_area_style{
??? width:400px;
??? height:100px;
??? background-color:white;
??? border-top:0px;
??? display:block;
??? float:left;
}
.tab_area_style *{
??? width:370px;
??? height:100px;
??? background-color:red;
??? border-top:0px;
??? color:white;
??? display:none;
??? margin-top:2px;
}
.content_area{
??? display:block;
}
?
JS-tab.js
var timeout;
$(document).ready(
??? ??? function(){
??? ??? ??? $("li").each(function(index){
??? ??? ??? ??? $(this).mouseover(function(){
??? ??? ??? ??? ??? timeout = setTimeout(function(){
??? ??? ??? ??? ??? ??? $(".content_area").removeClass("content_area");
??? ??? ??? ??? ??? ??? $(".listli").removeClass("listli");
??? ??? ??? ??? ??? ??? $("#tab_area *").eq(index).addClass("content_area");
??? ??? ??? ??? ??? ??? $("li").eq(index).addClass("listli");
??? ??? ??? ??? ??? },320);
??? ??? ??? ??? ???
??? ??? ??? ??? });
??? ??? ??? ??? $(this).mouseout(function(){
??? ??? ??? ??? ??? clearTimeout(timeout);
??? ??? ??? ??? });
??? ??? ??? });
??? ??? }
);
?
效果图：
