效果图：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
</head>
<body>
<div class="body">
<div class="box" id="box">
<ul class="title">
<a href="#"><li id="t1" onclick="oclick('t1')">新闻</li></a>
<a href="#"><li id="t2" onclick="oclick('t2')">杂志</li></a>
<a href="#"><li id="t3" onclick="oclick('t3')">动漫</li></a>
<a href="#"><li id="t4" onclick="oclick('t4')">音乐</li></a>
</ul>
<div id="d1" style="display: none">
THIS IS 1
</div>
<div id="d2" style="display: none">
THIS IS 2
</div>
<div id="d3" style="display: none">
THIS IS 3
</div>
<div id="d4" style="display: none">
THIS IS 4
</div>
</div>
</div>
</body>
</html>
CSS：
*{padding: 0; margin: 0;}
.box .title,.box .title li{padding:0;margin: 0;}
.body{width: 1200px; height: 1000px; box-shadow: 0 0 5px gray; margin: 0 auto; border: 1px solid #808080;}
.box{width: 420px; height: 266px; box-shadow: 0 0 5px gray; margin: 200px auto; border: 1px solid #808080;}
.box .title{list-style: none; text-align: center;}
.box .title li{width:80px; height:40px; font:12px/40px "微软雅黑"; float:left; background:ghostwhite; border:1px solid #f2f2f2;}
.box .title a li:hover{background:#F2F2F2}
.box div{width:420px; height:220px; margin-top:46px;}
JS:
// This is Glunefish js function.
function oclick(x){var obj = document.getElementById(x);
obj.style.border='none';
obj.style.background='#fff';
var ttotal = ['t1','t2','t3','t4'];
for(var i=0;i<4;i++){
if(ttotal[i] == x){
boxchange(i) ;
ttotal.splice(i,1);
continue;}
}
for(var i=0;i<ttotal.length;i++){
var obj = document.getElementById(ttotal[i]);
obj.style.border='1px solid #f2f2f2';
obj.style.background='ghostwhite';}
}
function boxchange(x){
var dlist = ['d1','d2','d3','d4'];
for(var i=0;i<dlist.length;i++){
document.getElementById(dlist[i]).style.display='none'}
document.getElementById(dlist[x]).style.display='block';
}
onload = function(){oclick('t1');}