html

头部

document.getElementsByClassName('content1')[0].style.display = 'block';
var li = document.getElementById('t').children;/跳转页面/
var contents = document.getElementsByClassName('content')[0].children;

//非常经典的额遍历绑定事件
for(var i = 0; i < li.length; i++){
//非常经典的问题，编号问题
li[i].index = i;
li[i].onclick = function(){
//alert(111);

//线上来把所有的class去掉
for(var i = 0; i < li.length; i++){
li[i].className = '';
}
//把当前选中的那个加一个acitve
this.className = 'active';

for(var i = 0; i < contents.length; i++){
contents[i].style.display = 'none';
}

document.getElementsByClassName('content' + (this.index + 1) )[0].style.display = 'block';
}
}

////xxxx();
}//选项卡

body







  • 主页

  • 课程

  • 老师

  • 关于我们






主页




课程




老师




关于我们




css

wrapper .info{

width: 1200px;
height: 100px;
background: white;
}
.info .bor{
width: 200px;
height: 200px;
position: relative;/上下左右动/
bottom: 110px;
left: 0;
}
.info .tab{
width: 1000px;
height:50px;
background:white;
position: relative;
left: 200px;
bottom: 200px;
border-bottom: 1px solid #CCCCCC;
}
.tab #t{/用#对于id，对于js的语句/
width: 500px;
height: 50px;
margin: 0 auto;
background: white;
}
.info .tab #t li{
height: 50px;/控制蓝色线的高度/
list-style: none;
line-height: 50px;
cursor: pointer;/鼠标点上去变成小手/
float: left;/li标签由竖行变成横行/
margin-right:30px;/变成横行之后，每个li标签的间距/
}
/#t对应id=t对应js代码部分，用#特定，唯一的/
#t .active {
border-bottom: 3px solid #188eee;/可以动的蓝色线/

}

wrapper .content {

margin-top: 40px;
}
.content div{/所有content在同一块/
display: none;
}
.content1 {
width: 100%;
height: 500px;
background: gray;
}
.content2 {
width: 100%;
height: 500px;
background: green;
}
.content3 {
width: 100%;
height: 500px;
background: red;
}
.content4 {
width: 100%;
height: 500px;
background: blue;
}