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&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&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&tagid=23"><b>武林英雄官方群</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&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&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&tagid=14"><b>游戏贴图</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&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&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&tagid=20"><b>三国群英传官方群</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&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&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&tagid=18"><b>飘渺仙剑客服群</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&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&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&tagid=17"><b>武林英雄客服群</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&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&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&tagid=25"><b>飘渺仙剑官方群</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&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&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&tagid=13"><b>游戏交友</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&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&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&tagid=15"><b>游戏交易</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&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
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)来实现. 本文以已经汉化的 ...
随机推荐
- 系统重装后phpnow修复
最近在捣鼓wordpress,主题写了一半然后就重装了win8,在新系统里面访问127.0.0.1的时候出现无法访问的情况.主题写了一半,又不想重装wordpress导数据库这些繁琐的过程,于是,尝试 ...
- 『奇葩问题集锦』Fedora ubuntu 下使用gulp 报错 Error: watch ENOSPC 解决方案
用gulp启动,错误如下 Error: watch ENOSPC at exports._errnoException (util.js:746:11) at FSWatcher.start (fs. ...
- Eyeshot Ultimate 学习笔记(4)
动画 Eyeshot的官方Demo中有一个功能是近期项目需要用到的,就是动画效果.其中主要运用到BlockReference类,该类下的两个方法MoveTo(Dictionary<string, ...
- c#中struct和class的区别 z
1.struct 是值类型,class是对象类型 2.struct 不能被继承,class可以被继承 3.struct 默认的访问权限是public,而class默认的访问权限是private. 4. ...
- 黑马程序员-------.net基础知识二
变量 变量代表着一块内存空间,我们可以通过变量名称想内存存/取数据,有变量就不需要我们记忆复杂的内存地址. 向内存中申请一块内存空间的语法: 数据类型 变量名; 变量类型 变量类型 存储位置 自动 ...
- Highcharts 本地导出图片和PDF asp.net mvc版
啰嗦: 现在大家利用Highcharts开发时,有时候会遇到导出的功能问题,但是highcharts默认是链接自己的服务器上进行处理,但是有时候我们会连不上他的服务器,所以我们要让他在我们的服务器上进 ...
- Intel项目Java小记
cannot be cast to javax.servlet.Filter添加provided即可 install -X是什么意思? Unsupported major.minor version ...
- Marsonry
前言 1 MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时 ...
- Coding.net代码托管平台建立WordPress
Coding.net这是一个国内新兴的代码托管平台,功能主要包括:代码托管.在线运行环境.监控代码质量,兼有一定的社交功能,在线运行环境支持Java.Ruby.Node.js.PHP.Python.G ...
- Pentaho Data Integration (二) Spoon
上一篇:Pentaho Data Integration笔记 (一):安装 介绍 Spoon Intoduction site: http://wiki.pentaho.com/display/EAI ...