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

  • 相关阅读:
    164 Maximum Gap 最大间距
    162 Find Peak Element 寻找峰值
    160 Intersection of Two Linked Lists 相交链表
    155 Min Stack 最小栈
    154 Find Minimum in Rotated Sorted Array II
    153 Find Minimum in Rotated Sorted Array 旋转数组的最小值
    152 Maximum Product Subarray 乘积最大子序列
    151 Reverse Words in a String 翻转字符串里的单词
    bzoj3994: [SDOI2015]约数个数和
    bzoj 4590: [Shoi2015]自动刷题机
  • 原文地址:https://www.cnblogs.com/imxiu/p/3413246.html
Copyright © 2011-2022 走看看