原生JS实现点击选项卡，下面内容根据选项卡进行变化

先看前端代码，这边设置了四个按钮，每次点击其中一个按钮，跳出对应的div，其他div隐藏

<div id="div1">
		<input class="active" type="button" value="教育"/>
		<input type="button" value="培训" />
		<input type="button" value="招生" />
		<input type="button" value="出国" />
		<div style="display: block;" >111</div>
		<div>222</div>
		<div>333</div>
		<div>444</div>
	</div>

接下来看css样式：将四个div隐藏掉，默认显示第一个，按钮选中的时候，设置按钮颜色

<style type="text/css">
		#div1 .active{
			background: yellowgreen;
		}
		#div1 div {
			width: 200px;
			height: 200px;
			background: #ccc;
			border: 1px solid black;
			display: none;
		}
		
	</style>

JS代码部分：

<script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('div1');//获取整个id
            var aBtn = oDiv.getElementsByTagName('input');//将id和对应的标签关联
            var aDiv = oDiv.getElementsByTagName('div');//将id和对应的标签关联
                
             for(var i=0;i<aBtn.length;i++){//四个按钮进行循环
                 aBtn[i].index=i;//按钮对应div，赋值相当于下面变换的div编号，从0开始
                 aBtn[i].onclick = function(){//赋予按钮点击事件
                     for(var i=0;i<aBtn.length;i++){//四个按钮进行循环
                         aBtn[i].className='';//默认一开始按钮都是未选中状态，默认颜色
                         aDiv[i].style.display='none';//一开始div都是隐藏的
                     }
                     this.className ='active';//点击的时候，按钮呈选中状态，增加active样式
                     aDiv[this.index].style.display='block';//选中按钮之后，对应的div出现
                 };
             }
        }

最终效果：