一个使用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="li_area_style">
<ul id="ul_area" class="ul_area_style">
<li class="listli">标签1</li>
<li >标签2</li>
<li >标签3</li>
</ul>
</div>
<div id="tab_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);
});
});
}
);
效果图：
![]()
分享到：
相关推荐
在这个“JQuery Tab_JQuery竖排选项卡代码示例”中，我们将探讨如何利用JQuery 1.4.4实现垂直排列的选项卡功能。 首先，让我们了解JQuery的基本用法。JQuery通过$函数作为入口，允许开发者选择HTML元素并对其进行...
【jQuery+CSS3竖排手风琴tab代码详解】 在网页设计中，Tab导航是一种常见的交互元素，它能有效地组织和展示内容。本教程将详细讲解如何利用jQuery和CSS3技术实现一款蓝色风格的竖排手风琴式Tab选项卡，具有鼠标点击...
标题中的“jquery竖排的TAB导航插件.rar”是指一个基于jQuery库的，用于创建垂直排列的TAB导航栏的插件。这个插件是专门为网页设计者和开发者准备的，旨在提供一种高效、灵活的方式来组织和展示网站内容。在网页设计...
《jQuery竖排动画手风琴折叠菜单栏代码详解》 在网页设计中，为了提高用户体验和界面的交互性，各种动态效果被广泛应用。其中，手风琴折叠菜单栏是一种常见的导航设计，它允许用户逐个展开或收缩菜单项，节省空间且...
在网页设计中，jQuery UI 的 tabs 是一个非常实用的功能，它允许我们将多个内容区域组织成可切换的选项卡，提供了一种整洁的方式来展示大量信息。然而，标准的 jQuery tabs 默认是横向排列的，但有时为了适应页面...
完全仿照天猫网站实现的各种jquery前台特效，各个模块下载。 完全仿照天猫网站实现的各种jquery前台特效，各个模块下载。
Easyui tabs Title居左侧，并且文字竖着显示