<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0; padding:0; list-style:none; font-size:12px;}
.notice{width:298px; height:98px; margin:10px;}
.notice_tit{height:27px; position:relative;}
.notice_tit ul{position: absolute; width:381px; left:-1px;}
.notice_tit li{float:left; width:58px; height: 26px; line-height: 26px; text-align: center; overflow: hidden; background-color: #fff; padding:0 1px; background-color: #eee; border-bottom:1px solid #eee;}
.notice_tit li.select{background-color: #fff; border-bottom-color: #fff; border-left: 1px solid #eee; border-right:1px solid #eee; padding:0; font-weight: bold;}
.notice_tit li a:link,
.notice_tit li a:visited{text-decoration: none; color:#000;}
.notice_tit li a:hover{color:#f90;}
.notice_con .mod{margin:10px 10px 10px 19px; display: none;}
.notice_con .mod ul li{float:left; width:134px; height:25px; overflow: hidden;}
</style>
</head>
<body>
<div id="notice" class="notice">
<div id="notice_tit" class="notice_tit">
<ul>
<li class="select"><a href="#">公告</a></li>
<li><a href="#">规则</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">安全</a></li>
<li><a href="#">问题</a></li>
</ul>
</div>
<div id="notice_con" class="notice_con">
<div class="mod" style="display:block;">
<ul>
<li><a href="#">张勇：111</a></li>
<li><a href="#">张勇：按实际和打击</a></li>
<li><a href="#">张勇：按实际和打击</a></li>
<li><a href="#">张勇：按实际和打击</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">张勇：222</a></li>
<li><a href="#">张勇：按实际和打击</a></li>
<li><a href="#">张勇：按实际和打击</a></li>
<li><a href="#">张勇：按实际和打击</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">张勇：333</a></li>
<li><a href="#">张勇：按实际和打击</a></li>
<li><a href="#">张勇：按实际和打击</a></li>
<li><a href="#">张勇：按实际和打击</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">张勇：444</a></li>
<li><a href="#">张勇：按实际和打击</a></li>
<li><a href="#">张勇：按实际和打击</a></li>
<li><a href="#">张勇：按实际和打击</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">张勇：555</a></li>
<li><a href="#">张勇：按实际和打击</a></li>
<li><a href="#">张勇：按实际和打击</a></li>
<li><a href="#">张勇：按实际和打击</a></li>
</ul>
</div>
</div>
</div>
<script>
function $(id){
return typeof id==="string"?document.getElementById(id):id;
}
window.onload =tab;
function tab(){
var timer = null;
var titles = $('notice_tit').getElementsByTagName('li');
var divs = $('notice_con').getElementsByTagName('div');
if (titles.length != divs.length) {
return;
}
for(var i = 0; i<titles.length; i++) {
titles[i].id = i;
titles[i].onmouseover = function() {
var that = this;
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function() {
for (var j = 0; j < titles.length; j++) {
titles[j].className = '';
divs[j].style.display = 'none';
}
titles[that.id].className = 'select';
divs[that.id].style.display = 'block';
}, 500)
}
}
}
</script>
</body>
</html>原生js-Tab选项卡点击切换效果
猜你喜欢
转载自blog.csdn.net/weixin_40002964/article/details/88104511
今日推荐
周排行