用JS写的一个简单的导航栏

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

兰维轩

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

阅读量1.7w

点赞数 8

分类专栏：前端文章标签： javascript 导航

本文链接：https://blog.csdn.net/lanxuan1/article/details/77850041

版权

前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			span {
				display: inline-block;
				margin-left: 30px;
				width: 150px;
				height: 40px;
				background: #FFFFFF;
				border-bottom: 2px solid #8A2BE2;
				font: 16px/40px "微软雅黑";
				text-align: center;
				color: #000000;
			}
			
			span.current,
			span:hover {
				background: #8A2BE2;
				color: #FFFFFF;
			}
			
			.hd {
				height: 40px;
			}
			
			.bd {
				height: 400px;
				padding: 10px 30px;
				font-size: 50px;
			}
			
			.bd>div {
				display: none;
			}
			
			.bd .show {
				display: block;
			}
		</style>
		<script>
			window.onload = function() {
				var sp = document.getElementsByTagName("span");
				var cons = document.querySelector(".bd").getElementsByTagName("div");
				for(var i = 0; i < sp.length; i++) {
					sp[i].index = i;

					sp[i].onmouseover = function() {
						for(var j = 0; j < sp.length; j++) {
							sp[j].className = "";
							cons[j].className = "";
						}
						this.className = "current";
						cons[this.index].className = "show";
					}
				}
			}
		</script>
	</head>

	<body>
		<div class="tab_box">
			<div class="hd">
				<span class="current">新闻</span>
				<span>军事</span>
				<span>房产</span>
				<span>体育</span>
				<span>娱乐</span>
			</div>
			<div class="bd">
				<div class="show">我是骑车新闻</div>
				<div>我是军事新闻</div>
				<div>我是房产新闻</div>
				<div>我是体育新闻</div>
				<div>我是娱乐新闻</div>
			</div>
		</div>
	</body>

</html>

兰维轩

关注

8
点赞
踩
35

收藏

觉得还不错? 一键收藏
0
评论
用JS写的一个简单的导航栏

选项卡 * { margin: 0; padding: 0; } span { display: inline-block; margin-left: 30px; width: 150px; height: 40px; background: #FFFFFF; border-bottom: 2px so
复制链接

扫一扫