代码最后，又使用JQ做了一次tab切换（已注释），自动切换不会弄，求老师教。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tab切换</title>
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="notice">
<div class="notice-tit">
<ul>
<li class="select">
<a href="javascript:;">公告</a>
</li>
<li>
<a href="javascript:;">规则</a>
</li>
<li>
<a href="javascript:;">论坛</a>
</li>
<li>
<a href="javascript:;">安全</a>
</li>
<li>
<a href="javascript:;">公益</a>
</li>
</ul>
</div>
<div class="notice-con">
<div class="mod">
<ul>
<li><a href="javascript:;">好莱坞大片好莱坞大片好莱坞大片好莱坞大片</a></li>
<li><a href="javascript:;">好莱坞大片好莱坞大片好莱坞大片好莱坞大片</a></li>
<li><a href="javascript:;">好莱坞大片好莱坞大片好莱坞大片好莱坞大片</a></li>
<li><a href="javascript:;">好莱坞大片</a></li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li><a href="javascript:;">好莱坞大片</a></li>
<li><a href="javascript:;">好莱坞大片</a></li>
<li><a href="javascript:;">好莱坞大片</a></li>
<li><a href="javascript:;">好莱坞大片</a></li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li><a href="javascript:;">好莱坞大片</a></li>
<li><a href="javascript:;">好莱坞大片</a></li>
<li><a href="javascript:;">好莱坞大片</a></li>
<li><a href="javascript:;">好莱坞大片</a></li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li><a href="javascript:;">好莱坞大片</a></li>
<li><a href="javascript:;">好莱坞大片</a></li>
<li><a href="javascript:;">好莱坞大片</a></li>
<li><a href="javascript:;">好莱坞大片</a></li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li><a href="javascript:;">好莱坞大片</a></li>
<li><a href="javascript:;">好莱坞大片</a></li>
<li><a href="javascript:;">好莱坞大片</a></li>
<li><a href="javascript:;">好莱坞大片</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
// js方法
var not=document.getElementsByClassName('notice-tit')[0].getElementsByTagName('li')
var con=document.getElementsByClassName('mod')
function showTab(i){//这里使用形参i的目的是：它将被用来表示鼠标指针所在的那个元素的索引（下标、位置）
for(j=0;j<not.length;j++){
not[j].className='';
con[j].style.display='none';
}
not[i].className='select';
con[i].style.display='block';
}
//开始获取鼠标指针所在元素的下标，使用index方法，为固定格式1,obj.index=i;2,this.index获取位置
for(i=0;i<not.length;i++){
not[i].index=i;
not[i].onmouseenter=function(){
showTab(this.index)
clearInterval(timer)
}
}
//自动跳转代码
var num=0;
var timer=null;
function autoPlay(){
num++
if(num==not.length){
mum=0;
}
showTab(num)
}
timer=setInterval(autoPlay,1000);
//jQ方法
// var not=$('.notice-tit').find('li');
// var con=$('.mod');
// not.mouseenter(function showTab(i){
// for(j=0;j<not.length;j++){
// not[j].className='';
// con[j].style.display='none';
// }
// $(this).attr('class','select')
// con[$(this).index()].style.display='block';
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例