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 相关文章推荐
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
vue中轮训器的使用
Jan 27 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
js实现简单抽奖功能
Nov 24 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
php二分法在IP地址查询中的应用
2008/08/12 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
小程序实现留言板
2018/11/02 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
Python实现的栈(Stack)
2018/01/26 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
美国精油公司:Plant Therapy
2019/05/17 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
2014新年寄语
2014/01/20 职场文书
人事部专员岗位职责
2014/03/04 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
个人工作表现评价材料
2014/09/21 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
个人存款证明书
2014/10/18 职场文书
保密工作整改报告
2014/11/06 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
义卖募捐活动总结
2015/05/09 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书