通栏形式的划出栏显示（使用于导航菜单）

最新推荐文章于 2023-05-15 15:18:07 发布

dongsdh

最新推荐文章于 2023-05-15 15:18:07 发布

阅读量824

点赞数

CC 4.0 BY-SA版权

分类专栏： html css javascript

本文链接：https://blog.youkuaiyun.com/dongsdh/article/details/79567310

javascript 同时被 3 个专栏收录

34 篇文章

订阅专栏

css

29 篇文章

订阅专栏

html

19 篇文章

订阅专栏

本文介绍了一种使用鼠标悬停事件实现导航栏下标联动显示的方法。通过获取导航栏元素的下标，并据此显示相应的栏目内容。使用了HTML、CSS和jQuery来实现导航栏与内容栏目的动态关联。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：用下标找导航栏对应的div,让其显示出来

html

	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<header>
		<div>
			<p>1</p>
			<p>2</p>
		</div>
		<div>
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
			<p>6</p>
		</div>
		<div>
			<p>1</p>
			<p>3</p>
		</div>
	</header>

css

	*{margin:0;padding:0;}
	ul li {
		display: inline-block;
		width: 20px;
		height: 20px;
		background: #e4393c;
	}
	
	header {
		position: relative;
		height: 0px;
		overflow: hidden;
		border: 1px solid #ddd;
		border-top: 0;
	}

script

	$("ul li").mouseenter(function(){
		var index = $(this).index();//获得导航栏的下标
		var showheight = $("header>div").eq(index).height();//获得下标对应栏目对应的高度
		
		$("header").animate({"height":showheight},200);//动画对应的高度自适应
		$("header>div").eq(index).show().siblings().hide();//显示出来
	})
	$("ul li").mouseleave(function(){//用mouseleave放置重复执行
		$("header").animate({"height":0},200)
	})