用JS写的一个简单的导航栏_用js写一个导航条

作者：很楠不爱3 | 2024-02-08 14:09:53

踩

用js写一个导航条


<!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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/69369