jQuery——tab选项卡

最新推荐文章于 2023-09-08 17:50:22 发布

与梦想同在

最新推荐文章于 2023-09-08 17:50:22 发布

阅读量186

点赞数

分类专栏： JAVA 文章标签：选项卡导航栏 tab

本文链接：https://blog.csdn.net/qq_41973154/article/details/100533718

版权

JAVA 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

鼠标滑动，切换不同的选项卡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<title>选项卡</title>
		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 440px;
				height: 298px;
				border: 1px solid #000;
				margin: 50px auto;
			}
			.nav>li{
				list-style: none;
				width: 110px;
				height: 50px;
				background-color: orange;
				text-align: center;
				line-height: 50px;
				float: left;
			}
			.nav>.current{
				background-color: darkgray;
			}
			.image>li{
				list-style: none;
				display: none;
			}
			.image>.show{
				display: block;
			}
			
		</style>
		<script>
			$(function(){
				//监听鼠标事件
				$(".nav>li").mouseenter(function(){
					//添加类
					$(this).addClass("current");
					//还原当前的其他兄弟
					$(this).siblings().removeClass("current");
					//切换
					var index= $(this).index();
					//得到当前图片的类
					var $li = $(".image>li").eq(index);
					//还原其他图片类
					$li.siblings().removeClass("show");
					//显示当前图片类
					$li.addClass("show");
					
				});
			});
		</script>
		
	</head>
	<body>
		<div class="box">
			<ul class="nav">
				<li class="current">C语言</li>
				<li>JAVA语言</li>
				<li>python语言</li>
				<li>GO语言</li>
			</ul>
			<ul class="image">
				<li class="show"><img src="image/0.jpg" width="440" height="248"> </li>
				<li><img src="image/1.jpg" width="440" height="248"></li>
				<li><img src="image/2.jpg" width="440" height="248"></li>
				<li><img src="image/3.jpg" width="440" height="248"></li>
			</ul>
		</div>
	</body>
</html>

效果图
在这里插入图片描述