zoukankan      html  css  js  c++  java
  • 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

    更多JS实用代码:http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/08/16/1800711.html

  • 相关阅读:
    Kruskal
    克鲁斯卡尔
    克鲁斯卡尔
    实践是检验真理的唯一标准 脱壳篇02
    Kruskal
    克鲁斯卡尔算法讲解
    实践是检验真理的唯一标准 脱壳篇02
    最小生成树(普里姆算法) 数据结构和算法62
    克鲁斯卡尔算法讲解
    最小生成树(普里姆算法) 数据结构和算法62
  • 原文地址:https://www.cnblogs.com/imxiu/p/3413246.html
Copyright © 2011-2022 走看看