javascript-tab切换效果
要点:
回调函数的使用,可以使函数的适应性更强,更健壮,方便扩展。
效果:
代码:
1 <style> 2 .active{ 3 color: #900; 4 background: #ccc; 5 } 6 </style> 7 <table width="500" border="0" cellspacing="0" cellpadding="0" id="tab" style="text-align:center;"> 8 <tr> 9 <td class="active">标签一</td> 10 <td>标签二</td> 11 <td>标签三</td> 12 <td>标签四</td> 13 </tr> 14 </table> 15 <table width="500" border="0" cellspacing="0" cellpadding="0" id="con"> 16 <tr><td>内容一</td></tr> 17 <tr><td>内容二</td></tr> 18 <tr><td>内容三</td></tr> 19 <tr><td>内容四</td></tr> 20 </table> 21 22 <script> 23 24 /* 25 tabs和tabcons是一一对应关系 26 @param tabs {array} 标签集合 27 @param tabcon {array} 对应切换内容集合 28 @param ev {event} 切换事件 注:ev in {"mouseover","click",....} 29 @param callFn {function} 回调函数 提高函数的适应性 30 */ 31 function tabChange(tabs,tabcons,ev,callFn){ 32 for(var i=0,len=tabs.length;i<len;i++){ 33 tabs[i].index=i; 34 tabs[i]["on"+(ev||"click")]=function(){ 35 for(var i=0,len=tabcons.length;i<len;i++){ 36 tabcons[i].style.display="none"; 37 } 38 tabcons[this.index].style.display="block"; 39 callFn&&callFn.call(this,this.index,this); 40 } 41 } 42 } 43 44 45 var tabs=document.getElementById("tab").getElementsByTagName("td"); 46 var cons=document.getElementById("con").getElementsByTagName("td"); 47 48 49 tabChange(tabs,cons,"mouseover",function(i,o){ 50 for(var k=0,len=tabs.length;k<len;k++){ 51 tabs[k].className=""; 52 } 53 o.className="active"; 54 55 }) 56 57 </script>
打完收工。
转载于:https://www.cnblogs.com/wengxuesong/archive/2013/05/15/3080399.html
javascript-tab切换效果相关推荐
- javascript tab切换类LixTabs最新版
javascript Tab切换类LixTabs,更新至0.5版: 受snandy的"读jquery"系列的启发,改进了代码,现在调用LixTabs时不用加new了.即可以这样写: ...
- Vue.js实现tab切换效果
tab切换第一步先要把HTML写好,这个第一步很关键,主要分为两块结构 <div id="app"><ul class="tab-tilte" ...
- js第三章简答题5(制作如图所示的Tab切换效果)
ps:代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
- css实现tab切换效果
<div class="match-instruction"><div id="tab2" class="mi-cont" ...
- navtab触底 小程序_微信小程序TAB切换效果
微信小程序tab切换效果 话不多说,先上效果图 主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页 然后是wxcss样式代码 .t ...
- Axure的动态面板制作tab切换效果
最近进行机房合作画原型图的时候用到了Axure画图软件,画出来的图感觉棒棒哒!在画结账窗体的时候确实遇到了一些问题,因为有动态效果图,点击不同的Tab时要有不同的界面显示,所以学习了一下! 结合注册窗 ...
- vue使用动态组件实现TAB切换效果
目录 一.方法1:使用Vant组件库的tab组件 二. 方法2:手动创建tab切换效果 2.在components文件夹下创建切换的.vue页面.引入使用 3.布局:上面放tab点击的标签,下面放组件 ...
- html 天猫上拉切换,jquery实现的仿天猫侧导航tab切换效果
本文实例讲述了jquery实现的仿天猫侧导航tab切换效果.分享给大家供大家参考.具体如下: 这里演示jquery实现仿天猫侧导航tab切换效果,引入外部JS,若初次运行有错误请刷新一页面即可.本菜单 ...
- history`pushState和window`onpopstate实现tab切换效果
前言 先来介绍一下history.pushState()和window.onpopstate history.pushState(),改变当前地址栏的路径,并不会更新页面内容 用法:history.p ...
- 三个Javascript内容切换效果类
1.滚动切换 类定义: Class RollingPhoto function RollingPhoto(photoBox){ this.direction="top"; ...
最新文章
- Android组件系列----BroadcastReceiver广播接收器
- input取消焦点 vue_Vue有什么特性,相对于其他框架都有那些优势!
- vue属性_computed(计算属性)methods(方法)
- xxxx must either be declared abstract or implement abstract method ‘map(T)‘ in ‘MapFunction‘
- 我的SourceInsight配置(附图)
- 你能否列出与 Elasticsearch 有关的主要可用字段数据类型?
- ftk学习记(窗口全屏设置篇)
- MySQL配置文件简单解析
- sql语法、特殊符号及正则表达式的使用
- Pixy通过TTL转USB与电脑串口调试助手显示坐标
- Markdown - CSND
- php 活动报名,活动报名小程序 - 微信小程版的活动在线报名,支持付费活动发布! – 基于ThinkPHP和Bootstrap的极速后台开发框架...
- 人类简史下载pdf_《人类简史:从动物到上帝》高清扫描版pdf下载
- sdelete使用指南(Windows Sysinternals Suite工具介绍转)
- STM32:sht20温湿度检测程序,并在OLED屏上显示
- js正则表达式检验经纬度
- 芒果改进YOLOv7系列:首发改进特征融合网络BiFPN结构,融合更多有效特征
- 2019 年第 26 周 DApp 影响力排行榜 | TokenInsight
- Java修仙,法力无边(光速回顾Java基础~)
- 运维工作简历(运维人员简历模板)
热门文章
- Visual C++ 2010中更换MFC对话框默认图标
- 频谱细化(补零、zfft、czt)
- verilog中有符号数运算
- matlab 跳步循环,跳步急停是用单脚或双脚起跳,上体稍后仰,两脚同时平行落地。落地时()着地,用前脚掌内侧抵蹬住地面,两膝弯曲,降低重心,两臂屈肘微张,以保持身体平衡。...
- 大学最重要的七项学习
- Redhat9安装firefox详解
- matplotlib cmap
- excel实现统计词频功能
- jittor和pytorch生成网络对比之softmax_gan
- 知识蒸馏原来不是你想的那样子