效果图
手动切换
自动切换
说明
- 文件夹结构如下图所示
源代码
demo01.css
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #000;
}
body{
font-size: 12px;
}
.notice{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 298px;
height: 98px;
border: 1px solid #eee;
overflow: hidden;
}
.notice-title{
height: 27px;
position: relative;
background: #f7f7f7;
}
.notice-title ul{
position: absolute;
width: 301px;
left: -1px;
}
.notice-title li{
float: left;
width: 58px;
height: 26px;
line-height: 26px;
text-align: center;
overflow: hidden;
padding: 0 1px;
background: #f7f7f7;
border-bottom: 1px solid #eee;
}
.notice-title li.select{
background: #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
font-weight: bold;
padding: 0;
}
.notice-title li a:hover{
color: #f90;
}
.notice-con .mod{
margin: 10px;
margin-left: 19px;
}
.notice-con .mod li{
float: left;
width: 120px;
margin-right: 10px;
height: 25px;
overflow: hidden;
}
.notice-con .mod li a{
white-space: nowrap;
overflow: hidden;
}
.notice-con li a:hover{
color: #f90;
}
demo01.js
window.onload = function(){
var titles = document.querySelector('.notice-title').getElementsByTagName('li');
var divs = document.querySelector('.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(){
for(var j=0; j<titles.length; j++){
titles[j].className = '';
divs[j].style.display = 'none';
}
this.className = 'select';
divs[this.id].style.display = 'block';
}
}
}
demo02.js
window.onload = function(){
var titles = document.querySelector('.notice-title').getElementsByTagName('li');
var divs = document.querySelector('.notice-con').getElementsByTagName('div');
var timer = null;
if(titles.length != divs.length){
return;
}
for(var i=0; i<titles.length; i++){
titles[i].id = i;
titles[i].onmouseover = function(){
var index = 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';
}
index.className = 'select';
divs[index.id].style.display = 'block';
}, 300);
}
}
}
demo03.js
window.onload = function(){
var titles = document.querySelector('.notice-title').getElementsByTagName('li');
var divs = document.querySelector('.notice-con').getElementsByTagName('div');
var timer = null;
var index = 0;
if(titles.length != divs.length){
return;
}
for(var i=0; i<titles.length; i++