<!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>
用JS写的一个简单的导航栏
最新推荐文章于 2024-06-30 14:04:39 发布