jquery简单实现鼠标滑过导航栏切换内容

最新推荐文章于 2023-07-04 11:04:04 发布

S小菲

最新推荐文章于 2023-07-04 11:04:04 发布

阅读量5.4k

点赞数 4

文章标签： jquery

本文链接：https://blog.csdn.net/F_family/article/details/79454867

版权

<!DOCTYPE HTML>

<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<style>
		* {
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
		}
		
		.container {
			width: 600px;
			height: 500px;
		}
		
		.six-top {
			width: 100%;
			height: 50px;
		}
		
		.six-top .six-top-item {
			width: 98px;
			height: 50px;
			background-color: #d5d5d5;
			text-align: center;
			line-height: 50px;
			float: left;
			margin-right: 2px;
			border: 1px solid #d5d5d5;
			cursor: pointer;
		}
		
		.six-top .six-top-item-spe {
			margin-right: 0px;
		}
		
		.six-top .on {
			background-color: #fff;
		}
		
		.six-cont {
			width: 100%;
			height: 450px;
			border: 1px solid #e8e8e8;
			position: relative;
		}
		
		.cont {
			width: 598px;
			height: 450px;
			position: absolute;
			left: 0;
			top: 0;
		}
		
		.six-cont1 {
			background-color: red;
			display: block;
		}
		
		.six-cont2 {
			background-color: orange;
			display: none;
		}
		
		.six-cont3 {
			background-color: yellow;
			display: none;
		}
		
		.six-cont4 {
			background-color: green;
			display: none;
		}
		
		.six-cont5 {
			background-color: blue;
			display: none;
		}
		
		.six-cont6 {
			background-color: pink;
			display: none;
		}
	</style>

	<body>
		<div class="container">
			<div class="six-top ">
				<div class="six-top-item on">标题1</div>
				<div class="six-top-item">标题2</div>
				<div class="six-top-item">标题3</div>
				<div class="six-top-item">标题4</div>
				<div class="six-top-item">标题5</div>
				<div class="six-top-item six-top-item-spe">标题6</div>
			</div>
			<div class="six-cont">
				<div class="cont six-cont1">标题1的内容</div>
				<div class="cont six-cont2">标题2的内容</div>
				<div class="cont six-cont3">标题3的内容</div>
				<div class="cont six-cont4">标题4的内容</div>
				<div class="cont six-cont5">标题5的内容</div>
				<div class="cont six-cont6">标题6的内容</div>
			</div>
		</div>
		<script>
			$('.six-top').on('mouseover', '.six-top-item', function() {
				var currentIndex = $(this).index() + 1;
				hideAll();
				hideAllTop();
				$(this).css('background-color', '#fff');
				$('.six-cont' + currentIndex).show();
			});

			function hideAll() {
				for(var i = 1; i < 7; i++) {
					$('.six-cont' + i).hide();
				}
			}

			function hideAllTop() {
				for(var i = 0; i < 6; i++) {
					$('.six-top-item').eq(i).css('background-color', '#d5d5d5');
				}
			}
		</script>
	</body>

</html>

S小菲

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
5
评论
jquery简单实现鼠标滑过导航栏切换内容

代码：&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script
复制链接

扫一扫