Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 超简单javascript实现的选项卡菜单效果

超简单javascript实现的选项卡菜单效果

发布时间:2017-01-09   编辑:www.jquerycn.cn
jquery中文网为您提供超简单javascript实现的选项卡菜单效果等资源,欢迎您收藏本站,我们将为您提供最新的超简单javascript实现的选项卡菜单效果资源
本文章介绍了关于超简单javascript实现的选项卡菜单效果的实现方法与实现代码,有需要的同学可以直接使用哦。
<script>ec(2);</script>
提示:您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" ><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>层切换</title> <style> #red{ display:block; float:left; position:absolute; width:400px; height:400px; background-color:#ff0000;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=deeppink); } #green{ display:none; float:left; position:absolute; width:400px; height:400px; background-color:#00ff00;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=green); } #blue{ display:none; float:left; position:absolute; width:400px; height:400px; background-color:#0000ff;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=skyblue,endColorStr=darkblue); } #switch{ position:absolute; top:400px; width:400px; height:30px; background-color:#000000; } #switch a.tabs{ float:left; color:#ffffff; height:28px; width:133px; margin:0; padding:8px 0 0 14px; font-size:12px; cursor:pointer; text-decoration:none;text-align:center; } #switch a.tabs:hover{ color:#ffff00; background-color:#666666; text-decoration:none; } body{filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=orange);} </style> <script language="javascript"> function switchbox(i) { selectbox(i); } function selectbox(i) { switch(i) { case 1: document.getElementById("red").style.display="block"; document.getElementById("green").style.display="none"; document.getElementById("blue").style.display="none"; break; case 2: document.getElementById("red").style.display="none"; document.getElementById("green").style.display="block"; document.getElementById("blue").style.display="none"; break; case 3: document.getElementById("red").style.display="none"; document.getElementById("green").style.display="none"; document.getElementById("blue").style.display="block"; break; } } </script> </head> <body>
红色绿色蓝色
</td> </tr> </table></textarea>
提示:您可以先修改部分代码再运行

您可能感兴趣的文章:
基于JQuery的6个Tab选项卡插件
用jquery统计子菜单的条数示例代码
JQuery实现绚丽的横向下拉菜单
7款风格新颖的jQuery/CSS3菜单导航分享
jQuery选项卡 KandyTabs
jquery+css+ul模拟列表菜单具体实现思路
jQuery菜单插件 Smooth Navigational Menu
php mysql动态树型菜单的实现(递归函数的灵活应用)
结构/表现/行为完全分离的选项卡(jquery版和原生JS版)
用jquery实现下拉菜单效果的代码

[关闭]