Tab选项卡切换卡JS效果

<script type="text/javascript">

    /*

       tab切换选项卡js效果     writed by ***  2010.08.13

       1.currentid:string 当前被激活菜单的id;

       2.otherids:Array() 其它未被激活的id;

       3.tabclasses:Array() tab被激活时的样式类+tab未被激活时的样式类,存储两个值即可

    */

    function chaneTab(currentid,otherids,tabclasses){

            var tagPrefix="tab";

            var conPrefix="con";

            //显示：

            document.getElementById(tagPrefix+currentid).className=tabclasses[0];

            document.getElementById(conPrefix+currentid).style.display="block";

            //隐藏：

            for(var i=0;i<otherids.length;i++){

                document.getElementById(tagPrefix+otherids[i]).className=tabclasses[1];

                document.getElementById(conPrefix+otherids[i]).style.display="none";

            }

        }

</script>

应用代码：

<div class="right_centerzbt ml10">

             <div class="tou">

                <ul class="mt50">

                   <li onmouseover="chaneTab('001',new Array('002'),new Array('center_bj',''))" id="tab001" class="center_bj"><a>名山明星榜</a></li>

                   <li onmouseover="chaneTab('002',new Array('001'),new Array('center_bj',''))" id="tab002"><a>热门群组</a></li>

                </ul>

             </div>

            <div id="con001" style="display: block;" class="right_content1 l bl br bb">

                    <iframe width="680" height="391" frameborder="0" scrolling="no" style="margin-left: -1px;" border="0" marginheight="0" marginwidth="0" src="shequ/uchome/do.php?ac=ajax&amp;op=getindexspace"></iframe>

            </div>

            <div id="con002" style="display: none;" class="right_content1 l bl br bb">

                           <ol class="mt10 ml10">

                <li class="quanzi_pic ml10"><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=23"><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/128142654112531.jpg"></a></li>

                <li class="ml5"><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=23"><b>武林英雄官方群</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=23">0</a></span>)</li>

                <li class="ml5"></li>

                <li class="ml5">主题：<span>0</span>，贴数：<span>0</span></li>

              </ol>

                            <ol class="mt10 ">

                <li class="quanzi_pic ml10"><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=14"><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/128142678521940.jpg"></a></li>

                <li class="ml5"><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=14"><b>游戏贴图</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=14">0</a></span>)</li>

                <li class="ml5">这里是维客分享与会员互动区。您的...</li>

                <li class="ml5">主题：<span>0</span>，贴数：<span>0</span></li>

              </ol>

                            <ol class="mt10 ml10">

                <li class="quanzi_pic ml10"><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=20"><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/12814265524528.jpg"></a></li>

                <li class="ml5"><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=20"><b>三国群英传官方群</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=20">0</a></span>)</li>

                <li class="ml5"></li>

                <li class="ml5">主题：<span>1</span>，贴数：<span>1</span></li>

              </ol>

                            <ol class="mt10 ">

                <li class="quanzi_pic ml10"><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=18"><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/128142657314254.jpg"></a></li>

                <li class="ml5"><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=18"><b>飘渺仙剑客服群</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=18">0</a></span>)</li>

                <li class="ml5"></li>

                <li class="ml5">主题：<span>0</span>，贴数：<span>0</span></li>

              </ol>

                            <ol class="mt10 ml10">

                <li class="quanzi_pic ml10"><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=17"><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/128142658426959.jpg"></a></li>

                <li class="ml5"><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=17"><b>武林英雄客服群</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=17">0</a></span>)</li>

                <li class="ml5"></li>

                <li class="ml5">主题：<span>1</span>，贴数：<span>1</span></li>

              </ol>

                            <ol class="mt10 ">

                <li class="quanzi_pic ml10"><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=25"><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/12814265147740.jpg"></a></li>

                <li class="ml5"><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=25"><b>飘渺仙剑官方群</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=25">0</a></span>)</li>

                <li class="ml5"></li>

                <li class="ml5">主题：<span>0</span>，贴数：<span>0</span></li>

              </ol>

                            <ol class="mt10 ml10">

                <li class="quanzi_pic ml10"><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=13"><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/128142679512873.jpg"></a></li>

                <li class="ml5"><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=13"><b>游戏交友</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=13">0</a></span>)</li>

                <li class="ml5">记录管理人员的意见或建议。</li>

                <li class="ml5">主题：<span>0</span>，贴数：<span>0</span></li>

              </ol>

                            <ol class="mt10 ">

                <li class="quanzi_pic ml10"><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=15"><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/128142677312935.jpg"></a></li>

                <li class="ml5"><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=15"><b>游戏交易</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=15">0</a></span>)</li>

                <li class="ml5">生活中的小窍门，都拿出来和大家分...</li>

                <li class="ml5">主题：<span>0</span>，贴数：<span>0</span></li>

              </ol>

                          </div>

         </div>

效果图：

From: http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/08/16/1800711.html

Tab选项卡切换卡JS效果的更多相关文章

纯js实现网页tab选项卡切换效果
纯js实现网页tab选项卡切换效果百度搜索 js 点击菜单项就可以切换内容的效果
下拉菜单效果和tab选项卡切换
//下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
vue实现tab选项卡切换效果
tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...
7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据
LayUI tab选项卡+page展示要求:实现tab选项卡改变的同时展示数据也跟着改变实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...
LayUI的基本使用 - Tab选项卡切换显示对应数据
要求:实现tab选项卡改变的同时展示数据也跟着改变实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...
react tab选项卡切换
Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...
纯CSS实现tab选项卡切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...
微信小程序Tab选项卡切换大集合
代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.co ...
Axure实现Tab选项卡切换功能
这几天用Axure画原型图的过程中,须要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以能够用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的 ...

随机推荐

ubuntu下virtualenv的复制
将一个用户下的virtualenv复制到另一个用户下.直接复制无法使用,source后的python依旧是系统自带的python. 原始env名:/home/llx/work/nn/nnenv.bak ...
js 作为属性的变量
当声明一个javascript全局变量时,实际上是定义了全局对象的一个属性. 当使用var声明一个变量时,创建的这个属性是不可配置的,也就是说这个变量无法通过delete运算符来删除.可能你已经注意到 ...
grub命令来引导linux
由于对linux系统的好奇,想按在机器上玩玩.昨天忙活了一晚上,最终才把linux安装好.但高兴的有点太早了,我还以为进linux就像进 windows那么简单哪,没有想到却蹦出来一个引导命令(gru ...
C# 程序关闭和进程关闭
this.Close(); 只是关闭当前窗口,若不是主窗体的话,是无法退出程序的,另外若有托管线程(非主线程),也无法干净地退出: 2.Application.Exit(); 强制所有消息中止, ...
Quartz2D 备忘 + 学习
Quartz2D Quartz2D是支持iOS和Mac系统的二维绘制引擎,它可以绘制: 绘制图形(图形,线条,圆等) 绘制文字绘制/生成图片读取/生成PDF 截图 Quartz2D主要功能就是以画 ...
Python的数据类型总结
原地可变类型和不可变类型原地不可变类型又叫可哈希(hashable)类型,原地可变类型又叫不可哈希类型. 原地不可变类型: 数字类型:int, float, decimal.Decimal, fra ...
C#中数据库连接的配置文件
在C#2010中,如何保存和访问数据库的连接字符串呢? 在Winform下要新增App.config文件,在Asp.net下要新增web.config文件. 1.打开配置文件添加相关代码后如下即可: ...
uva 1449 - Dominating Patterns
简单的AC自动机: #include<cstdio> #include<cstring> #include<queue> #define maxn 150005 u ...
【BZOJ 3387】线段树= =
57 跨栏训练为了让奶牛参与运动,约翰建造了 K 个栅栏.每条栅栏可以看做是二维平面上的一条线段,它们都平行于 X 轴.第 i 条栅栏所覆盖的 X 轴坐标的区间为 [ Ai,Bi ], Y 轴高度就是 ...
CollapsingToolbarLayout
CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags,它可以控制包含在Collapsin ...

Tab选项卡切换卡JS效果

Tab选项卡切换卡JS效果的更多相关文章

随机推荐

热门专题