Jquery的tab点击切换，悬停切换，延迟切换

最新推荐文章于 2022-11-23 11:42:49 发布

LLL_LH

最新推荐文章于 2022-11-23 11:42:49 发布

阅读量2.2k

点赞数

分类专栏： js jquery 文章标签： jquery

本文链接：https://blog.csdn.net/LLL_liuhui/article/details/79219195

版权

js 同时被 2 个专栏收录

78 篇文章 1 订阅

订阅专栏

jquery

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>tab选项卡点击切换,悬停切换,延迟切换</title>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<style>
			*{margin: 0;padding: 0;}
			li{list-style: none;}
			.tab{width: 498px;border: 1px solid #ccc;height: 100px;overflow: hidden;margin: 50px auto 0;}
			.title{height: 30px;background: #eee;text-align:center;}
			.title li{width: 70px;float: left; line-height: 30px;cursor: pointer;}
			.content{padding: 10px;}
			.content .contentlist{display: none;}
			.content .contentlist:nth-child(1){display: block;}
			.active{background: red;color: #fff;}
		</style>
	</head>
	<body>
		<div class="tab">
			<ul class="title">
				<li class="active">标题一</li>
				<li>标题二</li>
				<li>标题三</li>
			</ul>
			<div class="content">
				<div class="contentlist">内容一</div>
				<div class="contentlist">内容二</div>
				<div class="contentlist">内容三</div>
			</div>
		</div>
		
		<script>
			
			$(function(){
				//tab选项卡点击
				$(".title li").click(function(){  //标题点击
					var index=$(this).index();  //获得当前点击标题的下标
					$(this).addClass("active").siblings().removeClass("active"); //给当前选项添加选中，其他移除选中
					$(".content .contentlist").eq(index).show().siblings().hide();  //对应下标的内容框显示，其他隐藏
				});
				
				
				//tab选项卡悬停
				$(".title li").hover(function(){  标题悬停
					var index=$(this).index();  //获得当前点击标题的下标
					$(this).addClass("active").siblings().removeClass("active"); //给当前选项添加选中，其他移除选中
					$(".content .contentlist").eq(index).show().siblings().hide();  //对应下标的内容框显示，其他隐藏
				});
				
				
				//tab选项卡延迟切换
				var timer=null;
				$(".title li").hover(function(){
					if(timer){
						clearTimeout(timer);
						timer=null;
					}  //如果定时器存在的话就清除
					var index=$(this).index();  //获得当前点击标题的下标
					timer=setTimeout(function(){
						$(".title li").eq(index).addClass("active").siblings().removeClass("active"); //给当前选项添加选中，其他移除选中
						$(".content .contentlist").eq(index).show().siblings().hide();  //对应下标的内容框显示，其他隐藏
					},1000);
				});
			})
		</script>
	</body>
</html>

LLL_LH

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Jquery的tab点击切换，悬停切换，延迟切换

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>tab选项卡点击切换,悬停切换,延迟切换</title> <script type="text/javascript" src="js/jquery-2.1.0.js" ></scrip
复制链接

扫一扫