jQuery 简单的模拟tab切换

最新推荐文章于 2022-09-25 18:19:45 发布

能c能v

最新推荐文章于 2022-09-25 18:19:45 发布

阅读量680

点赞数

分类专栏：原创 jQuery

本文链接：https://blog.csdn.net/qq_43391160/article/details/99474813

版权

原创同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 400px;
				height: 200px;
				border: 1px solid red;
				float: left;
				margin-left: 15px;
				display: none;
			}
			
			.box.on{
				display:block;
			}
			a{
				padding: 10px;
				margin-left: 10px;
				width: 30px;
				display: block;
				height: 10px;
				border: 1px solid darkcyan;
				float: left;
			}
		</style>
	</head>
	<body>

			<a href="" class="on">1</a>
			<a href="">2</a>
			<a href="">3</a>
			<div class="box on">1</div>
			<div class="box">2</div>
			<div class="box">3</div>
			
	</body>
	<script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	
		$('a').mouseenter(function(){
			var index= $(this).index()
			$(this).addClass('on').siblings().removeClass('on');
			$('.box').eq(index).addClass('on').siblings().removeClass('on');
			
		})
		
	</script>

</html>

界面不重要，功能实现就好。

能c能v

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery 简单的模拟tab切换

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 400px; height: 200px; border:...
复制链接

扫一扫

专栏目录