children和 siblings的菜单选择

最新推荐文章于 2021-08-06 18:23:18 发布

xlj3

最新推荐文章于 2021-08-06 18:23:18 发布

阅读量352

点赞数

分类专栏：前端学习回顾

本文链接：https://blog.csdn.net/luman1991/article/details/54783057

版权

前端学习回顾专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
	<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
	<style type="text/css">
		*{margin:0;padding:0}
		.content{
			margin:100px auto;
			width:800px;
			height:1000px;
			border:1px red solid;
		}
		.content .box span{
			display:inline-bolck;
			
		}
		.content .box{
			padding-top:10px;
			border:2px gray solid;
			text-align:center;
		}
		.content .bd div{
			display:none;
		}
		.content .current{
			background-color:gray;
		}
	</style>
	 <script type="text/javascript">
		$(function(){
			$('.box span').mouseenter(function(){
			//children()儿子 siblings 兄弟
			//当前class设置current ，兄弟为空；
				$(this).attr('class','current').siblings().attr('class','');
				//$(this).index();获取元素索引
				//符合显示，兄弟隐藏
				$('.bd div').eq($(this).index()).show().siblings().hide();
			});
		});
	 </script>
	</head>
	<body>
		<div class="content">
			<div class="box">
				<span>新闻</span>
				<span>财经</span>
				<span>娱乐</span>
				<span>军事</span>
			</div>
			<div class="bd">
				<div>新闻</div>
				<div>财经</div>
				<div>娱乐</div>
				<div>军事</div>
			</div>
		</div>
	</body>

</html>

xlj3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
children和 siblings的菜单选择

*{margin:0;padding:0} .content{ margin:100px auto; width:800px; height:1000px; border:1px red solid; } .content .box span{ display:inline-bolck; } .content .box{ paddin
复制链接

扫一扫

专栏目录