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

更新时间：2016年09月20日 17:07:15 作者：webdm

这篇文章主要介绍了JS封装的选项卡TAB切换效果,结合实例形式分析了javascript响应鼠标事件动态操作页面元素属性实现tab切换的相关技巧,需要的朋友可以参考下

本文实例讲述了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>

运行效果图如下：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

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

您可能感兴趣的文章:

javascript ES6中set集合、map集合使用方法详解与源码实例
这篇文章主要介绍了javascript ES6中set、map使用方法详解与源码实例,需要的朋友可以参考下
2022-12-12
js导出excel文件的简洁方法(推荐)
下面小编就为带来一篇js导出excel文件的简洁方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
JavaScript中return用法示例
这篇文章主要介绍了JavaScript中return用法,结合实例形式简单分析了javascript中return语句的功能与使用技巧,需要的朋友可以参考下
2016-11-11
Prototype框架详解
Prototype是一个JavaScript框架，旨在简化动态Web应用程序的开发。原型被称为作为一个单一的文件分发的prototype.js，本文给大家介绍prototype框架，感兴趣的朋友一起学习吧
2015-11-11
JavaScript文档碎片操作实例分析
这篇文章主要介绍了JavaScript文档碎片操作技巧,结合实例形式分析了JavaScript中使用文档碎片优化dom操作的技巧,需要的朋友可以参考下
2015-12-12
微信小程序自定义多选事件的实现代码
本篇文章主要介绍了微信小程序自定义多选事件的实现代码，小程序和vue一样是没法操作dom的，所以要利用数组的下标和自定义属性来进行三元判断，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-05-05
JS写XSS cookie stealer来窃取密码的步骤详解
JavaScript是web中最常用的脚本开发语言，js可以自动执行站点组件，管理站点内容，在web业内实现其他有用的函数。这篇文章主要介绍了JS写XSS cookie stealer来窃取密码的步骤详解,需要的朋友可以参考下
2017-11-11
JavaScript显示当然日期和时间即年月日星期和时间
使用js显示当然日期和时间在网页中很是常见，方法有很多，不过多说大同小异，下面有个不错的示例，需要的朋友可以感受下
2013-10-10
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
JavaScript支持函数重载吗？可以说不支持，也可以说支持。说不支持，是因为JavaScript不能好像其它原生支持函数重载的语言一样，直接写多个同名函数，让编译器来判断某个调用对应的是哪一个重载。
2009-08-08
给localStorage设置一个过期时间的方法分享
我们都知道localStorage不主动删除,永远不会销毁，那么如何设置localStorage的过期时间呢？下面这篇文章主要给大家介绍了关于如何给localStorage设置一个过期时间的相关资料，需要的朋友可以参考下
2018-11-11