超级简单的标签页

最新推荐文章于 2023-03-24 10:06:59 发布

qq_38674970

最新推荐文章于 2023-03-24 10:06:59 发布

阅读量317

点赞数 1

分类专栏： jq学习文章标签： jquery 前端简单标签页

本文链接：https://blog.csdn.net/qq_38674970/article/details/78836741

版权

jq学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>测试</title>
   <script type="text/javascript" src="images/jquery.js"></script>
   <link rel="stylesheet" href="images/index.css">
</head>
<body>
	<div class="top">
		<ul>
			<li>
				教育
			</li>
			<li>
				培训
			</li>
			<li>
				出国
			</li>
		</ul>
	</div>
	<div class="main">
		<ul>
		<li>中国打破了事件软件巨头的规矩</li>
		<li>中国打破了事件软件巨头的规矩</li>
		<li>中国打破了事件软件巨头的规矩</li>
		<li>中国打破了事件软件巨头的规矩</li>
		<li>中国打破了事件软件巨头的规矩</li>
		<li>中国打破了事件软件巨头的规矩</li>
		<li>中国打破了事件软件巨头的规矩</li>
		</ul>

		<ul>
		<li>中国打破了事件软件巨头的规矩2</li>
		<li>中国打破了事件软件巨头的规矩2</li>
		<li>中国打破了事件软件巨头的规矩2</li>
		<li>中国打破了事件软件巨头的规矩2</li>
		<li>中国打破了事件软件巨头的规矩2</li>
		<li>中国打破了事件软件巨头的规矩2</li>
		<li>中国打破了事件软件巨头的规矩2</li>
		</ul>

		<ul>
		<li>中国打破了事件软件巨头的规矩3</li>
		<li>中国打破了事件软件巨头的规矩3</li>
		<li>中国打破了事件软件巨头的规矩3</li>
		<li>中国打破了事件软件巨头的规矩3</li>
		<li>中国打破了事件软件巨头的规矩3</li>
		<li>中国打破了事件软件巨头的规矩3</li>
		<li>中国打破了事件软件巨头的规矩3</li>
		</ul>
	</div>
	 <script type="text/javascript" src="images/index.js"></script>
</body>
</html>

*{ margin:0; padding:0;}
	body{
		background-color: pink;
	}
	li{list-style: none;}
	.on{
		background-color: white;
	}

	.top{
		width: 450px;height: 33px;background-color: gray;
	}
	.top ul{
		margin-left:33px;
	}
	.top ul li{
		width: 55px;
		height: 33px;
		float: left;
		line-height: 33px;
		text-align: center;
	}
	.main{
		background-color: yellow;
		width: 450px;
		height: 250px;
	}
	.main ul{
		position: absolute;top: 50px;left: 20px;
	}
	.main ul li{
		line-height: 34px;
	}

$(function(){
	var top=$('.top').find('ul li');
	var main=$('.main').find('ul');
		top.eq(0).addClass('on').siblings('li').removeClass('on');
		main.eq(0).show().siblings('ul').hide();
	function label(n){
		top.eq(n).addClass('on').siblings('li').removeClass('on');
		main.eq(n).show().siblings('ul').hide();
	}
	top.mouseenter(function(){
		console.log(123);
		n=top.index($(this));
		label(n);
	});
});