JS实现的tab切换选项卡效果示例

<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> <div> <ul> <li><a>名山明星榜</a></li> <li><a>热门群组</a></li> </ul> </div> <div> <iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="shequ/uchome/do.php?ac=ajax&amp;op=getindexspace"></iframe> </div> <div> <ol> <li><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=23" ><img onerror="this.onerror=null;this.src='';" src="https://192.168.0.113/shequ/uchome/upload/2010-08/128142654112531.jpg"></a></li> <li><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></li> <li>主题:<span>0</span>,贴数:<span>0</span></li> </ol> <ol> <li><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=14" ><img onerror="this.onerror=null;this.src='';" src="https://192.168.0.113/shequ/uchome/upload/2010-08/128142678521940.jpg"></a></li> <li><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>这里是维客分享与会员互动区。您的...</li> <li>主题:<span>0</span>,贴数:<span>0</span></li> </ol> <ol> <li><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=20" ><img onerror="this.onerror=null;this.src='';" src="https://192.168.0.113/shequ/uchome/upload/2010-08/12814265524528.jpg"></a></li> <li><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></li> <li>主题:<span>1</span>,贴数:<span>1</span></li> </ol> <ol> <li><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=18" ><img onerror="this.onerror=null;this.src='';" src="https://192.168.0.113/shequ/uchome/upload/2010-08/128142657314254.jpg"></a></li> <li><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></li> <li>主题:<span>0</span>,贴数:<span>0</span></li> </ol> <ol> <li><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=17" ><img onerror="this.onerror=null;this.src='';" src="https://192.168.0.113/shequ/uchome/upload/2010-08/128142658426959.jpg"></a></li> <li><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></li> <li>主题:<span>1</span>,贴数:<span>1</span></li> </ol> <ol> <li><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=25" ><img onerror="this.onerror=null;this.src='';" src="https://192.168.0.113/shequ/uchome/upload/2010-08/12814265147740.jpg"></a></li> <li><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></li> <li>主题:<span>0</span>,贴数:<span>0</span></li> </ol> <ol> <li><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=13" ><img onerror="this.onerror=null;this.src='';" src="https://192.168.0.113/shequ/uchome/upload/2010-08/128142679512873.jpg"></a></li> <li><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>记录管理人员的意见或建议。</li> <li>主题:<span>0</span>,贴数:<span>0</span></li> </ol> <ol> <li><a target="_blank" href="shequ/uchome/space.php?do=mtag&amp;tagid=15" ><img onerror="this.onerror=null;this.src='';" src="https://192.168.0.113/shequ/uchome/upload/2010-08/128142677312935.jpg"></a></li> <li><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>生活中的小窍门,都拿出来和大家分...</li> <li>主题:<span>0</span>,贴数:<span>0</span></li> </ol> </div> </div>

效果图:

JS实现的tab切换选项卡效果示例

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwzdjp.html