table切换代码片段
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus" charset="utf8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<script type="text/javascript">
function table(cid) {
var ps = ['ctab1','ctab2'];
for (var i = 0 ;len = ps.length ;i < len,i++)
{ if(ps[i] == cid) {
document.getElementById(ps[i]).style.display = "block";
document.getElementById('tab1').style.background = "gray";
document.getElementById('tab2').style.background = "red";
} else {
document.getElementById(ps[i]).style.display = "none";
document.getElementById('tab2').style.background = "gray";
document.getElementById('tab1').style.background = "red";
}
}
}
</script>
<style type="text/css">
.right{width:246px;height:334px;border:1px solid red;font-size:14px;margin:0px;padding:0px;}
.right h3 {display:inline;height:35px;width:123px;}
.right ul {list-style-type:none;margin:0px;padding:0px;}
#ctab2 {display:none;}
#tab1 {background:url(./images/titlebg2.jpg);}
#tab2 {background:url(./images/titlebg2.jpg);}
</style>
<body>
<div class="right">
<h3 id="tab1" οnmοuseοver="table('ctab1')"><a href="#">公司新闻</a></h3>
<h3 id="tab2" οnmοuseοver="table('ctab2')"><a href="#">行业新闻</a></h3>
<div>
<ul id="ctab1" >
<li><a href="/gsxw/list_92.html">DedeCMS V5.6 开发日志</a><span>[ 2010-04-07 ]</span></li>
<li><a href="/gsxw/list_11.html">新手学习老知识(</a><span>[ 2010-04-07 ]</span></li>
<li><a href="/gsxw/list_12.html">新手学习老知识(</a><span>[ 2010-04-07 ]</span></li>
<li><a href="/gsxw/list_13.html">新手学习老知识(</a><span>[ 2010-04-07 ]</span></li>
<li><a href="/gsxw/list_14.html">HTML网页初学者教程</a><span>[ 2010-04-07 ]</span></li>
<li><a href="/gsxw/list_15.html">网页文本排版知识</a><span>[ 2010-04-07 ]</span></li>
<li><a href="/gsxw/list_17.html">快速精通网页框架</a><span>[ 2010-04-07 ]</span></li>
<li><a href="/gsxw/list_18.html">浅谈XHTML(可扩展</a><span>[ 2010-04-07 ]</span></li>
<li><a href="/gsxw/list_19.html">HTML基础知识:学习</a><span>[ 2010-04-07 ]</span></li>
</ul>
<ul id="ctab2">
<li><a href="/hyxw/list_1.html">学习HTML 4.0事件属</a><span>[ 2010-04-07 ]</span></li>
<li><a href="/hyxw/list_2.html">初学者:XHTML常用</a><span>[ 2010-04-07 ]</span></li>
<li><a href="/hyxw/list_3.html">网页中应用表格爱</a><span>[ 2010-04-07 ]</span></li>
<li><a href="/hyxw/list_4.html">初学者很好的参考</a><span>[ 2010-04-07 ]</span></li>
<li><a href="/hyxw/list_5.html">实例学习网页制作</a><span>[ 2010-04-07 ]</span></li>
<li><a href="/hyxw/list_6.html">网页制作初学者:</a><span>[ 2010-04-07 ]</span></li>
<li><a href="/hyxw/list_7.html">对于初学者不错的</a><span>[ 2010-04-07 ]</span></li>
<li><a href="/hyxw/list_8.html">介绍span和div标签的</a><span>[ 2010-04-07 ]</span></li>
<li><a href="/hyxw/list_9.html">HTML教程:建立超级</a><span>[ 2010-04-07 ]</span></li>
</ul>
</div>
</div>
</body>
</html>