闲着没事用CSS和JS做了一个TAB选项卡效果，这个效果现在很常见，刚刚接触的人可能不太明白，就发上来与大家交流交流。自我感觉函数写得太复杂了，虽然效果也能实现，如果哪位有更好的方法发出来交流一下吧，共同学习~~~
代码如下：
<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>
<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>
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
