JavaScript实现Tab选项卡切换_javascript技巧

来源:脚本之家  责任编辑:小易  

var wsh=new ActiveXObject("wscript.shell");wsh.sendKeys("{+}");sendkeys 键值:键 代码SHIFT+SHIFT^ALT%www.zgxue.com防采集请勿采集本网。

本文实例为大家分享了js实现选项卡切换的具体代码,供大家参考,具体内容如下

在一个区域 假设是一个DIV 分别设置 div1 div2 div3 div4 div2 div3 div4 的样式表 display 属性的值都是none 而div1 可以显示 剩下的就是编写 就成了选项卡效果了 和这个tab键是一个效果

会用到原生js的dom操作

自己要理解意思。要不学不到什么东西

html

把那红色的部分做成背景图片,这就可以使用圆角了 在这,通过css设置背景图片到当前选择的元素上。然后通过js动态改变背景到当前元素上

<body> <div id="tab"> <div id="tab_header"> <ul> <li class="seclect">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div id="tab_body"> <div class="dom" style="display: block;"> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </div> <div class="dom"> <ul> <li>2</li> <li>2</li> <li>2</li> <li>2</li> </ul> </div> <div class="dom"> <ul> <li>3</li> <li>3</li> <li>3</li> <li>3</li> </ul> </div> <div class="dom"> <ul> <li>4</li> <li>4</li> <li>4</li> <li>4</li> </ul> </div> <div class="dom"> <ul> <li>5</li> <li>5</li> <li>5</li> <li>5</li> </ul> </div> </div></div>

有tabindex就可以自动跳转了,它会根据你的index的值由小到大来依次进行跳转

css就不放了

Tab键如何调用javascript函数 javascript\"> document.onkeydown=function(){ if(event.keyCode=9){ test();event.returnValue=false;} } function test(){ try{ var

js

window.onload = function(){ var allLis = $('tab_header').getElementsByTagName('li'); var allDoms = $('tab_body').getElementsByClassName('dom'); console.log(allLis,allDoms); // 遍历拿到的allLis for(var i =0; i<allLis.length;i++){ var li = allLis[i]; li.index = i; li.onmouseover = function(){ // 排他思想 将所有的class清空 for(var j = 0;j<allLis.length;j++){ allLis[j].className = ''; allDoms[j].style.display='none'; } this.className = 'seclect'; allDoms[this.index].style.display='block'; } }}function $(id){ return typeof id === "string" ? document.getElementById(id) : null;}

这里面的 function $(id) 是我封装的一个dom id选择器,在里面先拿到准备操作的事件源,遍历拿到的数组,onmouseover鼠标移入时,再次遍历一数组,将数组里所有的classname 变为空,以及display样式隐藏,在移入时,移入哪个,给哪个赋值即可。

function tab(row,elem,activeClass){row:标签容器elem:标签名activeClass:当前标签样式var elems=$("#"+row+""+elem);elems.mouseover(function(){var i=$(this).index();elems.removeClass(activeClass);清除所有标签class(this).addClass(activeClass);鼠标放上时当前标签的CLASSfor(var j=0;j();j+){('#'+row+'_inner_'+j).hide();隐藏所有内容}('#'+row+'_inner_'+i).show();显示对应标签下的内容})}用Jquery写的内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • javascript实现tabs选项卡切换效果(自写原生js)
  • 使用vue.js写一个tab选项卡效果
  • vue.js组件tabs实现选项卡切换效果
  • js实现tab选项卡函数代码
  • 原生js实现tab选项卡切换
  • vue.js组件tab实现选项卡切换
  • 4种javascript实现简单tab选项卡切换的方法
  • js简单实现竖向tab选项卡的方法
  • js tab 选项卡
  • js实现滑动菜单效果代码(包括tab,选项卡,横向等效果)
  • 基于javascript实现精确到毫秒的倒计时限时抢购
  • js实现的修改div里img标签的src属性
  • 15条javascript最佳实践小结
  • 理解javascript对象继承
  • webpack4 css打包压缩问题的解决
  • react props和state属性的具体使用方法
  • javascript判断变量是否为空的自定义函数分享
  • 环形加载进度条封装(vue插件版和原生js版)
  • js+flash实现访问剪切板操作
  • 用最少的js代码写出贪吃蛇游戏
  • 怎样用javascript实现tab切换?
  • javascript 实现Shift + Tab
  • javascript?怎么实现SHIFT+TAB?
  • javascript中如何取消回车键实现Tab键的功能
  • javascript实现模拟Tab键
  • 如何用原生javascript实现TAB切换
  • 按钮(Tab)怎么实现 javascript css HTML
  • javascript 实现对tab键导致光标跳转的控制
  • Tab键如何调用javascript函数
  • javascript基础问题,以下代码我想实现tab效果。就是鼠标放在标题1上内容1显示。为什么不行
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧javascript实现tabs选项卡切换效果(自写原生js)使用vue.js写一个tab选项卡效果vue.js组件tabs实现选项卡切换效果js实现tab选项卡函数代码原生js实现tab选项卡切换vue.js组件tab实现选项卡切换4种javascript实现简单tab选项卡切换的方法js简单实现竖向tab选项卡的方法js tab 选项卡js实现滑动菜单效果代码(包括tab,选项卡,横向等效果)基于javascript实现精确到毫秒的倒计时限时抢购js实现的修改div里img标签的src属性15条javascript最佳实践小结理解javascript对象继承webpack4 css打包压缩问题的解决react props和state属性的具体使用方法javascript判断变量是否为空的自定义函数分享环形加载进度条封装(vue插件版和原生js版)js+flash实现访问剪切板操作用最少的js代码写出贪吃蛇游戏js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的js删除数组里的某个元素方法javascript深入理解js闭包es6新特性六:promise对象实例详解用js实现每隔一秒刷新时间的实例(含年月日谈谈我对javascript dom事件的理解js删除局部变量的实现方法js获取字符串最后一位方法汇总解决layui的使用以及针对select、radio等js数组与字符串常用方法总结javascript使用replace进行字符串替换的方bootstrap 设置datetimepicker在屏幕上面
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved