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

来源：互联网发布：php技术论坛编辑：程序博客网时间：2024/06/05 15:27

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

阅读全文

0 0