<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>选项卡菜单</title>
<style type="text/css">
.bg{background:url(MenuLine.gif) repeat; height:30px; width:328px; line-height:30px}
ul{list-style-type:none; margin:0; padding:0; font-size:14px}
ul li{float:left; width:82px; text-align:center}
.mouseon{background:url(Menu.gif) no-repeat; font-weight:bold; color:#FFFFFF}
.mouseout{font-weight:normal}
#content0,#content1{width:326px!important; width:328px; height:200px; border:1px solid #dcefe1}
h2{margin:0; padding:0}
</style>
<script language="javascript">
function Tab(m,n)
{
var menu=document.getElementById('menu'+m).getElementsByTagName('li');
var list=document.getElementById('content'+m).getElementsByTagName('div');
for(var i=0;i<menu.length;i++)
{
menu[i].className=i==n?"mouseon":"mouseout";
list[i].style.display=i==n?"block":"none";
}
}
</script>
<body>
<div id="menu0" class="bg">
<ul>
<li class="mouseon" onMouseOver="Tab(0,0)">选项1</li>
<li class="mouseout" onMouseOver="Tab(0,1)">选项2</li>
<li class="mouseout" onMouseOver="Tab(0,2)">选项3</li>
<li class="mouseout" onMouseOver="Tab(0,3)">选项4</li>
</ul>
</div>
<div id="content0">
<div style="display:block">
<h2>帝王槌</h2><br/>
立剑赏月意惆怅,袖饰刀,衣披霜,傲视雾丸,徒手战扶桑.<br />
问津终寻帝王陵,黑影没,尸满岗,惟见逆鲮露寒光. <br />
须发苍,气轩昂,三尺银狼,破风动八方. <br />
依身紧握噬魂枪,饮虎血,豪万丈.惟有千年我故乡!
</div>
<div style="display:none">
<h2>玉女枪法</h2><br/>
曾经有个梦想:驰骋江湖,快意恩仇。<br />
曾经有份愿望:千里追凶,十步溅血。<br />
曾经有腔豪情:奇功盖世,名冠武林。<br />
曾经有种期盼:烛影摇红,衣袖添香。
</div>
<div style="display:none">
<h2>黑沙刚体</h2><br/>
赵客缦胡缨,吴钩霜雪明。银鞍照白马,飒沓如流星。
十步杀一人,千里不留行。事了拂衣去,深藏身与名。
闲过信陵饮,脱剑膝前横。将炙啖朱亥,持觞劝侯嬴。
三杯吐然诺,五岳倒为轻。眼花耳热后,意气素霓生。
救赵挥金锤,邯郸先震惊。千秋二壮士,烜赫大梁城。
纵死侠骨香,不惭世上英。谁能书阁下,白首太玄经。
</div>
<div style="display:none">
<h2>不羁浪人枪</h2><br/>
素手相牵,斜辉入眼帘,一轮逍遥自在间,醉了山水闲。<br />
沙漠绿水涟,鱼游浅底,明眸一水天。<br />
爱在村友相谈,开心点点,笑语连连,率性夜无眠。<br />
月在西边,风乱星寒,辗转醇香旧事,蛾儿曼舞灯前。
</div>
</div>
<p>
<div id="menu1" class="bg">
<ul>
<li class="mouseon" onMouseOver="Tab(1,0)">选项5</li>
<li class="mouseout" onMouseOver="Tab(1,1)">选项6</li>
<li class="mouseout" onMouseOver="Tab(1,2)">选项7</li>
<li class="mouseout" onMouseOver="Tab(1,3)">选项8</li>
</ul>
</div>
<div id="content1">
<div style="display:block">
<h2>干将</h2><br/> 干将者,吴人也;莫邪,干将之妻也。干将作剑,金铁之精不流,于是干将夫妻,乃断发剪爪,投于炉中,金铁乃濡,遂以成剑,阳曰干将,阴曰莫邪。
</div>
<div style="display:none">
<h2>龙渊</h2><br/> “何谓龙渊、太阿、工布?”答曰:“欲知龙渊,观其状,如登高山,临深渊;欲知太阿,观其(纹),巍巍翼翼,如流水之波;欲知工布,(纹)从文起,至脊而止,如珠不可衽,文若流水不绝。”
</div>
<div style="display:none">
<h2>湛卢</h2><br/>
欧冶子所铸五大名剑为三大二小。其大者有湛卢、纯钧、胜邪;其小者有鱼肠、世阙。
</div>
<div style="display:none">
<h2>轩辕剑</h2><br/>
轩辕采首山之铜,铸剑,以天之古字题名。
</div>
</div>
</body>
</html>
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/pepoble/archive/2009/12/23/5062109.aspx