html div relative top 多出一截,标签栏多出一部分，而且刚开始加载的时候，不知道为什么显示了两个div的内容...

//js

function getId(id) {

return typeof id === 'string' ? document.getElementById(id) : id;

}

window.onload = function () {

var titLis = getId('notice-title').getElementsByTagName('li');

var mods = getId('notice-content').getElementsByTagName('div');

console.log(mods.length + titLis.length);

//确保titles的个数与content个数相等

if (titLis.length != mods.length) return;

for(var i = 0;i 

console.log(titLis[i]);

//给每个li加上索引属性id，方便后面的content里面的div调用

titLis[i].id = i;

//鼠标滑过时给每一个li元素加上select高亮显示

titLis[i].onmouseover = function() {

for(var j = 0;j 

titLis[j].className = '';//添加高亮之前去除之前的高亮样式，不然就会点一个高亮增加一个，而不是只选中一个

mods[j].style.display = 'none'; //全部隐藏，方便后边mods显示内容

}

this.className = 'select';

mods[this.id].style.display = 'block';

}

}

}

//CSS

* {

padding: 0;

margin: 0;

font-size: 16px;

list-style: none;

text-decoration: none;

}

.notice {

width: 298px;

height: 98px;

border: 1px solid #eee;

overflow: hidden;

margin: 100px auto;

}

.notice-title {

background-color: #f7f7f7;

height: 27px;

position: relative;

}

.notice-title ul {

width: 301px;

left: -1px; //为了不让最左边和最右边的tab的左边框和右边框与最外层的盒子的边框重叠

position: absolute;

}

.notice-title li {

float: left;

width: 58px; //301px/5个li元素，每个li元素还要加1px的边框

height: 26px;

line-height: 26px; //要加一个底边框,没有高亮的时候

color: black;

text-align: center;

border-bottom: 1px solid #eee;

background-color: #f7f7f7;

}

.notice-title li.select {

background-color: #fff;

border-bottom-color: #fff;

border-left: 1px solid #eee;

border-right: 1px solid #eee;

font-weight: bold;

}

.notice-title li a:link,.notice-title li a:visited {

color: black;

}

.notice-title li a:hover {

color: #f90;

}

.notice-content .mod {

overflow: hidden;

margin: 10px 10px 10px 19px;

}

//html

html>

tab-面向过程的制作多种切换效果

• 切换1
• 切换2
• 切换3
• 切换4
• 切换5

1111

2222

3333

4444

5555