html栏目互相切换,css 栏目切换表

无标题文档

function setTab(m,n){

var tli=document.getElementById("menu"+m).getElementsByTagName("li");

var mli=document.getElementById("main"+m).getElementsByTagName("ul");

for(i=0;i

tli[i].className=i==n?"hover":"";

mli[i].style.display=i==n?"block":"none";

}

}

body,div,ul,li{

margin:0 auto;

padding:0;

}

body{

font:12px "宋体";

text-align:center;

}

a:link{

color:#00F;

text-decoration:none;

}

a:visited {

color: #00F;

text-decoration:none;

}

a:hover {

color: #c00;

text-decoration:underline;

}

ul{

list-style:none;

}

.main{

clear:both;

padding:8px;

text-align:center;

}

#tabs0 {

height: auto;

width: 400px;

border: 1px solid #cbcbcb;

}

.menu0{

width: 400px;

}

.menu0 li{

display:block;

float: left;

padding: 4px 0;

width:100px;

text-align: center;

cursor:pointer;

background: #068DD0;

}

.menu0 li.hover{

background: #f2f6fb;font-weight:bold;

}

#main0 ul{

display: none;

}

#main0 ul.block{

display: block;

}

• 新闻
• 评论
• 技术
• 点评

• 新闻列表

• 评论列表

• 技术列表

• 点评列表