<div class="tab"> 
<div id="tabsK"> 
<ul id="menu4"> 
<li onclick="settab(4,0)" class="hover"><a title="最新更新"><span>最新更新</span></a></li> 
<li onclick="settab(4,1)"><a title="企業(yè)新聞"><span>企業(yè)新聞</span></a></li> 
<li onclick="settab(4,2)"><a title="行業(yè)新聞"><span>行業(yè)新聞</span></a></li> 
<li onclick="settab(4,3)"><a title="專欄文章"><span>專欄文章</span></a></li> 
<li onclick="settab(4,4)"><a title="科技新聞"><span>科技新聞</span></a></li> 
</ul> 
</div> 

<div class="tab2" id="main4"> 
<ul class="block"></ul> 
<ul ></ul> 
<ul ></ul> 
<ul ></ul> 
<ul ></ul> 
</div> 
</div>

CSS:

復(fù)制代碼代碼如下:

#tabsK { 
float:left; 
width:100%; 
line-height:normal; 
border-bottom:1px solid #54545C; 
} 
#tabsK ul { 
margin:0; 
padding:10px 10px 0 10px; 
list-style:none; 
} 
#tabsK li { 
display:inline; 
margin:0; 
padding:0; 
cursor:pointer; 
} 
#tabsK a { 
float:left; 
background:url("image/tableftK.gif") no-repeat left top; 
margin:0; 
padding:0 0 0 4px; 
text-decoration:none; 
} 
#tabsK a span { 
float:left; 
display:block; 
background:url("image/tabrightK.gif") no-repeat right top; 
padding:8px 16px 4px 6px; 
color:#FFF; 
} 

#tabsK a span {float:none;} 
/* End IE5-Mac hack */ 
#tabsK a:hover span { 
cursor:pointer; 
color:#FFF; 
background-position:100% -42px; 
} 
#tabsK a:hover { 
background-position:0% -42px; 
cursor:pointer; 
} 
#tabsK .hover a 
{ 
background-position:0% -42px; 
} 
#tabsK .hover span 
{ 
background-position:100% -42px; 
} 

.tab2 ul 
{ 
display:none; 
list-style-type:none; 
height:560px; 
} 
.tab2 ul li 
{ 
text-align:left; 
line-height:20px; 
text-indent:1em; 
} 
.tab2 .block 
{ 
display:block; 
}

JS:

復(fù)制代碼代碼如下:

<script language="javascript"><!-- 
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.length;i++){ 
tli[i].className=i==n?"hover":""; 
mli[i].style.display=i==n?"block":"none"; 
} 
} 
// --></script>

截圖和用到的兩張圖片：