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)来实现. 本文以已经汉化的 ...
随机推荐
- [Leveldb源码剖析疑问]-block_builder.cc之Add函数
Add函数是给一个Data block中添加对应的key和value,函数源码如下,其中有一处不理解: L30~L34是更新last_key_的,不理解这里干嘛不直接last_key_ = key.T ...
- [C#]『Barrier』任务并行库使用小计
Barrier 是一个对象,它可以在并行操作中的所有任务都达到相应的关卡之前,阻止各个任务继续执行. 如果并行操作是分阶段执行的,并且每一阶段要求各任务之间进行同步,则可以使用该对象. --MSDN ...
- js 不可变的原始值和可变的对象引用
javascript中的原始值(undefined.null.布尔值.数字和字符串)与对象(包括数组和函数)有着根本区别.原始值是不可更改的:任何方法都无法更改(或“突变”)一个原始值.对数字和布尔值 ...
- __construct()和__initialize()
ThinkPHP中的__initialize()和类的构造函数__construct()网上有很多关于__initialize()的说法和用法,总感觉不对头,所以自己测试了一下.将结果和大家分享.不对 ...
- WCF Rest Json
1.定义ServiceContract及实现 [ServiceContract] public interface IMemberService { [OperationContract] strin ...
- LDR伪指令与ADR伪指令的区别
测试代码 ldr r0, _start adr r0, _start ldr r0, =_start nop mov pc, lr _start: nop 设置代码的起始地址为 0x0c008000, ...
- MVC引用CSS文件の正确姿势
你的css文件目录结构: 将路径写入BundleConfig规则中: using System.Web; using System.Web.Optimization; namespace XXXX { ...
- JavaEE下载文件名不显示中文的问题
我们在做JavaEE项目下载文件时,在我们熟悉的UTF-8编码下经常会发现文件名中文乱码.中文不显示等状况,此时,将文 件名改一下编码或许会解决这个烦恼: fileName = new String( ...
- 设置UIButton的文字居右显示 去掉点击默认置灰效果
1.设置UIButton的文字居右显示 [button setContentHorizontalAlignment:UIControlContentHorizontalAlignmentRight]; ...
- jquery 判断是否 ie6 ie7 ie8
var isIE = !!window.ActiveXObject; var isIE6 = isIE && !window.XMLHttpRequest; var isIE8 = ...