楼主试下以下方法，
www.sure56.net首页有演示
CSS样式：
#test{ width: 424px; padding-bottom:5px; float:left; BORDER-RIGHT: #9fc3dd 1px solid; BORDER-TOP: #9fc3dd 0px solid; BORDER-LEFT: #9fc3dd 1px solid; BORDER-BOTTOM: #9fc3dd 1px solid}
/* 头部总体 css */
.ntab2-head {
clear:both; height: 25px; text-align: center;BACKGROUND: url(bg_type.gif); padding-top:3px; padding-bottom:0px; padding-left:30px;
}
/* 头部列表的 css */
.ntab2-head li {
float:left;width: 80px; cursor: pointer; font-size: 14px;line-height: 25px; list-style-type: none; color:#0870B1; font-weight:bold
}
.ntab2-head li.current {
background: #fff; color: #000; cursor: none;
}
/* 主体内容的 css? */
.ntab2-body {
text-align: left; width:410px; word-wrap: break-word; word-break: normal; line-height:25px; padding-bottom:0px;
}
.ntab2-body dl {
text-indent: 0px; margin: 0px; padding-bottom:0px; padding-left:0px; padding-right:5px; padding-top:5px; width:395px;
}
这些写在模板里：
<div id="test">
<!-- 头部设定 -->
<div class="ntab2-head">
<li>今日更新</li>
<li>广西</li>
<li>国内</li>
<li>国际</li>
</div>
<!-- 内容设定 -->
<div class="ntab2-body">
<dl>
<LI>{FS400_首页最新}
</dl>
<dl>
<li>{FS400_广西物流最新}
</dl>
<dl>
<li>{FS400_国内最新}
</dl>
<dl>
<li>{FS400_国际最新}
</dl>
</div>
</div>
<script language="javascript">ntab2_register('test', 4);</script>
这些写在<head></head>之间:
<SCRIPT>
<!--
function show_tbl(pre,n,select_n){
for(i=0;i<n;i++){
var tbl= document.getElementById(pre+i);
tbl.style.display="none";
if(i==select_n){
tbl.style.display="block";
}
}
}
-->
</SCRIPT>
<script language="javascript">
function ntab2_register(id, def)
{
var obj = document.getElementById(id);
if (!obj || !obj.hasChildNodes())
{
alert('ERROR: the object was not defined for #' + id + '#');
return;
}
// get head & body object
var head = null;
var body = null;
for (var i = 0; i < obj.childNodes.length; i++)
{
var node = obj.childNodes
;
if (node.tagName == 'DIV')
{
if (node.className == 'ntab2-head')
head = node;
else if (node.className == 'ntab2-body')
body = node;
}
}
if (!head) { alert('ERROR: head elements was not found for #' + id + '#'); return; }
if (!body) { alert('ERROR: body elements was not found for #' + id + '#'); return; }
// set action & default
var items = head.getElementsByTagName('LI');
var datas = body.getElementsByTagName('DL');
if (items.length == 0) { alert('ERROR: empty set for head elements on #' + id + '#'); return; }
if (items.length != datas.length)
{
alert('ERROR: not equal between body.length and head.length for #' + id + '#');
return;
}
var total = items.length;
if (typeof def == 'undefined') def = 0;
else def = parseInt(def)%total;
if (def < 0) def += total;
for (var i = 0; i < total; i++)
{
datas.style.display = (i == def ? '' : 'none');
items.className = (i == def ? 'current' : '');
items.onmouseover = function() {
for (var k = 0; k < total; k++)
{
datas[k].style.display = (this == items[k] ? '' : 'none');
items[k].className = (this == items[k] ? 'current' : '');
}
}
}
}
</script>
