jQuery实现的 “滑动门”（跟随鼠标滑动滑动的tab选项卡）效果

最新推荐文章于 2022-06-13 22:30:32 发布

原创最新推荐文章于 2022-06-13 22:30:32 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #div #border

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的滑动门效果，通过简单的HTML结构配合jQuery的事件处理及DOM操作，实现了当鼠标悬停在导航标签上时，显示对应内容区域的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
<meta http-equiv="Content-Type" content= "text/html; charset=utf-8" />
<style>
ul,li{
background-color:#999;
margin:0px;
padding:0px;
list-style:none;
color:#fff;
}
li{
padding:3px;
float:left;
margin-right:2px;
border:#FFF 1px solid;
}
div{
clear:left;
height:150px;
width:300px;
background-color:#666;
display:none;
}
li.tabin{
background-color:#666;
border:#666 solid 1px;
}
div.contentin{
padding:3px;
display:block;
color:#FFF;
}
</style>
<title>jQuery实现常见的滑动门效果</title>
<script language="javascript" type= "text/javascript" src= "../include/jquery-1.5.1.min.js" ></script>
<script type="text/javascript" >
var timeoutid;
$(function (){
/*
实现滑动门核心
1、把当前样式（li、div选中状态）移除
2、设置鼠标移动到的当前li对象的样式选中状态
3、设置鼠标移动到的当前li对象所对应的div的样式选中状态
如何设置当前li对象所对应的div为选中状态?
解决：遍历所有的li并且根据当前li对象的索引值去设置对应索引值的div
*/
//遍历所有的li
$("li" ).each( function (index){
//处理鼠标移动到li上的事件
$(this).mouseover(function (){
var liObj=$(this);
timeoutid=setTimeout(function (){
//清空所有的处于选中状态的样式
$("li.tabin" ).removeClass();
$("div.contentin" ).removeClass();
//设置当前li索引值对应的div
$("div" ).eq(index).addClass( "contentin" );
//设置当前的li和当前li所对应的div
liObj.addClass("tabin" );
},300);
}).mouseout(function (){
clearTimeout(timeoutid);
});
});
});
</script>
</head>
<body>
jQuery实现常见的滑动门效果
<hr>
<ul>
<li class = "tabin" >标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<div class = "contentin" >标签1内容文字</div>
<div>标签2内容文字</div>
<div>标签3内容文字</div>
</body>
</html>