注册 登录
编程论坛 → WEB前端(UI)

CSS+JS实现滑动门效果

sldtk1 发布于 2008-11-08 15:09， 6351 次点击
闲着没事用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>

浏览器中效果
只有本站会员才能查看附件，请 登录

源文件
只有本站会员才能查看附件，请 登录
20 回复
#2
playtime2008-11-09 13:22
要是把CSS和HTML分开写就更好了！
#3
sldtk12008-11-09 15:53
样式比较少，所以分开写比较麻烦
#4
sldtk12008-11-09 15:57
这是修改后的代码，把函数精简了，减了两个参数
程序代码：
<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}
#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>
#5
kai2008-11-10 13:40
有没有兴趣用php 来实现tabbed panel?
#6
sldtk12008-11-10 14:04
php和这好像没关系吧，或者你是指里面的内容从数据库里读取是吗？

[[it] 本帖最后由 sldtk1 于 2008-11-10 14:08 编辑 [/it]]
#7
kai2008-11-10 15:04
用php可以实现啊，不用javascript.
#8
sldtk12008-11-10 15:35
你是说用$定义变量？
#9
kai2008-11-10 16:12
变量肯定要定义的，我还没写测试代码。
#10
sldtk12008-11-10 16:24
算法大概都是一样的，只是语法不同，但这样一来通用性就减少了，只能在PHP的服务器上运行
#11
kai2008-11-10 16:36
你租用服务器的时候反正是要考虑是不是支持php的，所以这也谈不上通用性减少的问题。对用户来讲，也就是对浏览器而言反正都是 html 文件. 唯一的区别就是 动态是体现在服务器端还是体现在client 端。
#12
sldtk12008-11-10 17:00
如果用的是.net的服务器，那么原来用php写的代码不是要重新写过？毕竟JS是很多浏览器都支持的
#13
kai2008-11-10 17:05
这个问题不存在的。不会去选支持 .net 的服务器的。
#14
sldtk12008-11-10 17:17
那要看是用什么语言开发的，jsp asp php .net,虽然现在用php的网站最多，但其它类型的网站也还是存在的
#15
恋轩念伊人2008-11-11 16:55
用层的隐藏来就简单多拉
#16
sldtk12008-11-11 18:13
[bo][un]恋轩念伊人[/un] 在 2008-11-11 16:55 的发言：[/bo]
用层的隐藏来就简单多拉

这个不就是层的隐藏么？
#17
恋轩念伊人2008-11-12 18:44
回复 16# 的帖子
是这样,但是没有必要写这么多代码
哦,看到了,下面那种三元算法才是最好的
#18
huangyong2008-11-14 13:10
2楼的代码还可以更简洁一些，比如：display:blok这样的东西可以直接通过样式来调用，方便维护。
#19
天涯明月刀2010-09-04 10:58
能不能把他改成jquery 的
#20
sldtk12010-09-06 17:03
回复 19楼 天涯明月刀
Jquery的应该换个取ID的方法就行了
$("#ID")  这样
其余比如fadeOut fadeIn可以自己加上去
#21
a690317062010-09-26 09:10
回复 10楼 sldtk1
楼主我是个菜鸟，我想为你一下怎样学习用函数编网页呢？？？？能给我推荐点书籍吗？？？？
1
©2025, BCCN.NET
电脑版