CSS+JS实现滑动门效果
闲着没事用CSS和JS做了一个TAB选项卡效果，这个效果现在很常见，刚刚接触的人可能不太明白，就发上来与大家交流交流。自我感觉函数写得太复杂了，虽然效果也能实现，如果哪位有更好的方法发出来交流一下吧，共同学习~~~
程序代码：<html xmlns="http://www.选项卡菜单</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}/*选项卡未激活的样式*/
.list{width:326px!important; width:328px; height:200px; border:1px solid #dcefe1}/*嵌套内容的DIV样式*/
h2{margin:0; padding:0}
</style>
<script language="javascript">
function Tab(m,t,c,n)/*赋给函数四个参数，m代表菜单的个数，t代表选项卡的id，c代表对应子内容的id，n是标识*/
{/*下面这句表示把ID为menu(m)下的子节点<li>标签的个数取出来赋给childNodes*/
var childNodes=document.getElementById('menu'+m).getElementsByTagName('li');
for(var i=1;i<=childNodes.length;i++)/*对每个子节点进行遍历*/
{
if(i==n)/*当i等于标识，即选项卡被选中*/
{
document.getElementById(t+i).className="mouseon";/*选项卡样式为激活状态*/
document.getElementById(c+i).style.display="block";/*相应内容显示*/
}
else
{
document.getElementById(t+i).className="mouseout";/*选项卡样式为未激活状态*/
document.getElementById(c+i).style.display="none";/*相应内容隐藏*/
}
}
}
</script>
<body>
<div id="menu1" class="bg">
<ul><!--函数取menu(1)下的<li>标签，首先将第一个设为激活状态，其余未激活-->
<li id="t1" class="mouseon" onMouseOver="Tab('1','t','a','1')">选项1</li>
<li id="t2" class="mouseout" onMouseOver="Tab('1','t','a','2')">选项2</li>
<li id="t3" class="mouseout" onMouseOver="Tab('1','t','a','3')">选项3</li>
<li id="t4" class="mouseout" onMouseOver="Tab('1','t','a','4')">选项4</li>
</ul>
</div>
<div class="list">
<div id="a1" style="display:block"><!--第一个选项卡的内容显示，其余隐藏-->
<h2>帝王槌</h2><br/>
立剑赏月意惆怅,袖饰刀,衣披霜,傲视雾丸,徒手战扶桑.<br />
问津终寻帝王陵,黑影没,尸满岗,惟见逆鲮露寒光. <br />
须发苍,气轩昂,三尺银狼,破风动八方. <br />
依身紧握噬魂枪,饮虎血,豪万丈.惟有千年我故乡!
</div>
<div id="a2" style="display:none">
<h2>玉女枪法</h2><br/>
曾经有个梦想：驰骋江湖，快意恩仇。<br />
曾经有份愿望：千里追凶，十步溅血。<br />
曾经有腔豪情：奇功盖世，名冠武林。<br />
曾经有种期盼：烛影摇红，衣袖添香。
</div>
<div id="a3" style="display:none">
<h2>黑沙刚体</h2><br/>
赵客缦胡缨，吴钩霜雪明。银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。眼花耳热后，意气素霓生。
救赵挥金锤，邯郸先震惊。千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。谁能书阁下，白首太玄经。
</div>
<div id="a4" style="display:none">
<h2>不羁浪人枪</h2><br/>
素手相牵，斜辉入眼帘，一轮逍遥自在间，醉了山水闲。<br />
沙漠绿水涟，鱼游浅底，明眸一水天。<br />
爱在村友相谈，开心点点，笑语连连，率性夜无眠。<br />
月在西边，风乱星寒，辗转醇香旧事，蛾儿曼舞灯前。
</div>
</div>
<p>
<div id="menu2" class="bg">
<ul>
<li id="l1" class="mouseon" onMouseOver="Tab('2','l','b','1')">选项5</li>
<li id="l2" class="mouseout" onMouseOver="Tab('2','l','b','2')">选项6</li>
<li id="l3" class="mouseout" onMouseOver="Tab('2','l','b','3')">选项7</li>
<li id="l4" class="mouseout" onMouseOver="Tab('2','l','b','4')">选项8</li>
</ul>
</div>
<div class="list">
<div id="b1" style="display:block">
<h2>干将</h2><br/> 干将者，吴人也；莫邪，干将之妻也。干将作剑，金铁之精不流，于是干将夫妻，乃断发剪爪，投于炉中，金铁乃濡，遂以成剑，阳曰干将，阴曰莫邪。
</div>
<div id="b2" style="display:none">
<h2>龙渊</h2><br/> “何谓龙渊、太阿、工布？”答曰：“欲知龙渊，观其状，如登高山，临深渊；欲知太阿，观其（纹），巍巍翼翼，如流水之波；欲知工布，（纹）从文起，至脊而止，如珠不可衽，文若流水不绝。”
</div>
<div id="b3" style="display:none">
<h2>湛卢</h2><br/>
欧冶子所铸五大名剑为三大二小。其大者有湛卢、纯钧、胜邪；其小者有鱼肠、世阙。
</div>
<div id="b4" style="display:none">
<h2>轩辕剑</h2><br/>
轩辕采首山之铜，铸剑，以天之古字题名。
</div>
</div>
</body>
</html>浏览器中效果
源文件
css+js滑动门效果.rar
(6.03 KB)
，或者你是指里面的内容从数据库里读取是吗？