JS封装的选项卡TAB切换效果示例


Posted in Javascript onSeptember 20, 2016

本文实例讲述了JS封装的选项卡TAB切换效果。分享给大家供大家参考,具体如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JS封装的选项卡TAB代码</title>
<style type="text/css">
*{ padding:0; margin:0;}
.block{ display:block;}
.none{ display:none;}
#wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;}
#diya,#diyas{ list-style:none;}
#diya li,#diyas li{ width:66px; height:28px; border:1px solid #09C; text-align:center; line-height:28px; float:left; cursor:pointer; margin-right:3px;}
#diyas li:hover{ background:#CCC;}
#diya li.on,#diyas li.on{ background:#9C3;}
#wrap div,#wraps div{ width:498px; height:198px; border:1px solid #000;}
</style>
</head>
<body>
<div id="wrap">
<ul id="diya">
<li class="on">第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<br clear="all" />
<div class="block">第一部分</div>
<div class="none">第二部分</div>
<div class="none">第三部分</div>
</div>
<div id="wraps">
<ul id="diyas">
<li class="on">第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<br clear="all" />
<div class="block">第一部分</div>
<div class="none">第二部分</div>
<div class="none">第三部分</div>
</div>
</body>
</html>
<script type="text/javascript">
tab("wrap","diya","mouseover")
tab("wraps","diyas")
function tab(wrap,navul,eve){
//tab效果封装,目前只有两种变换方式,一种为点击事件click(也是默认事件),另外一种为鼠标移过事件mouseover
var divs=document.getElementById(wrap).getElementsByTagName("div");
var lis=document.getElementById(navul).getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].indx=i;
if(eve=="click" || eve==null){
lis[i].onclick=function(){
  for(i=0;i<lis.length;i++){
    
    lis[i].className="";
    divs[i].className="none"
    
    this.className="on";
    divs[this.indx].className="block";
    }
  }
}else if(eve=="mouseover"){
  lis[i].onmouseover=function(){
    for(i=0;i<lis.length;i++){
    lis[i].className="";
    divs[i].className="none";
    
    this.className="on";
    divs[this.indx].className="block";
      }
    }
  }
}
}
</script>

运行效果图如下:

JS封装的选项卡TAB切换效果示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 #Javascript
JS获取鼠标相对位置的方法
Sep 20 #Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 #Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 #Javascript
AngularJS删除路由中的#符号的方法
Sep 20 #Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 #Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 #Javascript
You might like
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
python3实现名片管理系统
2020/11/29 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
英语系毕业生求职信
2014/07/13 职场文书
项目合作协议书
2014/09/23 职场文书
股权转让协议书
2014/12/07 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
MySQL如何使备份得数据保持一致
2022/05/02 MySQL