您的位置：首页 > Web前端 > JQuery

JQuery实现的简单标签选项卡效果

2011-12-10 20:28 711 查看

<!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>jQuery实现的标签选项卡效果</title>
<style type="text/css">
ul,li
{
list-style:none;
padding:0;
margin:0;
}
li
{
float:left;
background-color:Silver;
color:White;
padding:5px;
margin-left:5px;
border:1px solid White;
}
div
{
clear:left;
background-color:Gray;
color:White;
width:240px;
height:100px;
padding:3px;
display:none;
}
.content
{
display:block;
}
.tab
{
background-color:Gray;
border:1px solid Gray;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout;//延时全局变量
$(function () {
//遍历选项卡
$('li').each(function (index) {
$(this).mouseover(function () {  //鼠标划入
var linode = $(this);
timeout = setTimeout(function () {        //设置延时，防止鼠标无意移动照成的显示错误
$('.content').removeClass("content"); //将原来显示的区域进行隐藏
$('.tab').removeClass("tab"); //移除选项卡的特效
$(linode).addClass("tab"); //给鼠标划入的选项卡添加tab
$('div').eq(index).addClass("content"); //显示划入标签下的内容
}, 300);//设置300毫秒的鼠标划入显示延迟
}).mouseout(function () {
clearTimeout(timeout);//当鼠标离开时清楚延时
});
});
});
</script>
</head>
<body>
<h3>jQuery实现的简单标签选项卡效果</h3>
<h4>当鼠标滑向任一选项卡,显示当前选项卡，隐藏其他选项卡</h4>
<h4>设置简单的选项卡高亮效果,当鼠标随意快速划入时不显示当前选项卡内容,停留300毫秒才显示</h4>
<ul>
<li class="tab">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<div class="content">选项卡1的内容</div>
<div>选项卡2的内容</div>
<div>选项卡3的内容</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航