SOURCE

window.onload = function(){
			var tab = document.getElementById('tab');
			var li = tab.getElementsByTagName('li');
			var box = document.getElementById('box');
			var con = box.getElementsByClassName('con');

			for (var i=0;i<li.length;i++){
				li[i].xuhao = i;
				li[i].onmouseover = function(){
					// alert(this.xuhao);
					// con[this.xuhao].style.display = 'block';
					for (var i=0;i<con.length;i++){
						con[i].style.display = 'none';
					}
					con[this.xuhao].style.display = 'block';
				}
			}
		}

<div id="tab">
		<ul>
			<li style="background:blue">首页</li>
			<li style="background:orange">导航</li>
			<li style="background:green">技术</li>
		</ul>
		<div id="box">
			<div class="con" style="background:blue;display:block;">首页内容</div>
			<div class="con" style="background:orange;">导航内容</div>
			<div class="con" style="background:green;">技术资料</div>
		</div>
	</div>

*{
			padding: 0;
			margin: 0;
		}
		#tab{
			width: 600px;
			height: 600px;
			border: 1px solid red;
			box-sizing: border-box;
			margin: 100px auto;
		}
		#tab ul{
			width: 600px;
			height: 50px;
			list-style: none;
		}
		#tab ul li{
			width: 200px;
			height: 50px;
			text-align: center;
			line-height: 50px;
			font-size: 22px;
			color: #fff;
			float: left;
		}
		#tab #box{
			width: 580px;
			height: 530px;
			line-height: 530px;
			margin: 10px auto;
			border: 1px solid purple;
			text-align: center;
			position: relative;
		}
		#tab #box .con{
			position: absolute;
			left: 0px;
			top: 0px;
			width: 580px;
			height: 530px;
			display: none;
		}