效果图：

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 #fff;} .box{width: 820px; height: 366px; box-shadow: 0 0 5px gray; margin: 200px auto; border: 1px solid #fff;} .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:820px; height:320px; margin-top:46px;}

JS:

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