选项卡

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

        <div class="info">
			<div class="bor">
					<img src="img/feng-logo.jpg" width="180px" height="180px"/>
			</div>
			<div class="tab">
				<ul id="t">
					<li class="active">主页</li>
					<li>课程</li>
					<li>老师</li>
					<li>关于我们</li>
				</ul>
			</div>
		</div>	
				<div class="content">
					<div class="content1">
						<h2>主页</h2>
					</div>
					<div class="content2">
						<h2>课程</h2>
					</div>
					<div class="content3">
						<h2>老师</h2>
					</div>
					<div class="content4">
						<h2>关于我们</h2>
					</div>
				</div>	
	</div>

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;
	}