前端技术分享-码匠 极客编程技术分享

您当前位于：原生JS实战开发 ——> Tab切换效果[系列] - 利用自定义属性实现Tab切换
上一篇：Tab切换效果[系列] - 通过children等DOM操作提升Tab切换的扩展性 下一篇：Tab切换效果[系列] - 原生AJAX技术实现Tab切换

Tab切换效果[系列] - 利用自定义属性实现Tab切换

2015/05/03 19:37:09 | 作者：HTML5学堂（码匠） | 分类：原生JS实战开发 | 关键词：Tab切换,函数封装,代码复用

从一个简单的Tab切换开始——利用“对象的属性”

HTML5学堂：为何要利用对象的属性进行Tab切换的简化呢？在前面两种效果的书写当中，我们都利用到了闭包的概念，但是我们都知道，闭包是让函数能够处于持续性的被引用状态，从而不能释放空间，闭包的滥用会导致内存泄露。此时我们利用对象的属性配合索引值这种方式来简化Tab切换效果。

利用对象的属性简化Tab切换

基本原理：

在每次循环的时候，都为相应数组元素添加一个索引值tabTits[i].index，这个属性是我们自己的自定义属性。在点击之后，利用this找到被点击的标题元素，然后获取到原来存储到这个元素（对象）身上的index属性。

核心代码：

  1. <script>
  2.     var tab = document.getElementById('tab'),
  3.         tabTits = document.getElementById('tabTit').children,
  4.         tabCons = document.getElementById('tabCon').children,
  5.         len = tabTits.length;
  6.  
  7.     for (var i = 0; i < len; i++) {
  8.  
  9.         // 关键在于此处，为相应数组元素添加一个索引值属性
  10.         tabTits[i].index = i;
  11.         tabTits[i].onclick = function(){
  12.             for (var i = 0; i < len; i++) {
  13.                 tabTits[i].className = '';
  14.                 tabCons[i].className = '';
  15.             };
  16.             // 此处利用this找到被点击的标题元素，然后获取到原来存储到这个元素（对象）身上的index属性
  17.             tabTits[this.index].className = 'select';
  18.             tabCons[this.index].className = 'show';
  19.         }
  20. };
  21. </script>

全代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Tab-独行冰海-HTML5学堂</title>
  6.     <style>
  7.         *{margin: 0;padding: 0;}
  8.         .tab{
  9.             width: 375px;
  10.             margin: 25px auto;
  11.         }
  12.         .tabTit li{
  13.             float: left;
  14.             width: 123px;
  15.             height: 38px;
  16.             border: 1px solid #00f;
  17.             text-align: center;
  18.             background: #ccf;
  19.             line-height: 38px;
  20.             list-style: none;
  21.         }
  22.         .tabTit li:hover{
  23.             background: #aaf;
  24.             cursor: hand;
  25.             cursor: pointer;
  26.         }
  27.         .tabTit .select{
  28.             background: #99f;
  29.         }
  30.         .tabCon div{
  31.             width: 373px;
  32.             height: 400px;
  33.             border: 1px solid #00f;
  34.             border-top: none;
  35.             display: none;
  36.         }
  37.         .tabCon .show{
  38.             display: block;
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <div id='tab' class='tab'>
  44.         <ul id='tabTit' class='tabTit'>
  45.             <li class='select'>标题一</li>
  46.             <li>标题二</li>
  47.             <li>标题三</li>
  48.         </ul>
  49.         <div id='tabCon' class='tabCon'>
  50.             <div class='show'>HTML5学堂 - 独行冰海</div>
  51.             <div>欢迎光临</div>
  52.             <div>一切都从Tab开始</div>
  53.         </div>
  54.     </div>
  55. </body>
  56. <script>
  57.     var tab = document.getElementById('tab'),
  58.         tabTits = document.getElementById('tabTit').children,
  59.         tabCons = document.getElementById('tabCon').children,
  60.         len = tabTits.length;
  61.  
  62.     for (var i = 0; i < len; i++) {
  63.  
  64.         // 关键在于此处，为相应数组元素添加一个索引值属性
  65.         tabTits[i].index = i;
  66.         tabTits[i].onclick = function(){
  67.             for (var i = 0; i < len; i++) {
  68.                 tabTits[i].className = '';
  69.                 tabCons[i].className = '';
  70.             };
  71.             // 此处利用this找到被点击的标题元素，然后获取到原来存储到这个元素（对象）身上的index属性
  72.             tabTits[this.index].className = 'select';
  73.             tabCons[this.index].className = 'show';
  74.         }
  75. };
  76. </script>
  77. </html>

欢迎沟通交流~HTML5学堂

从一个简单的Tab切换开始——封装函数，提高复用性

当我们能够实现基本功能之后，作为一个“懒人”，自然而然的想到的应该是：“如何我以后再去书写Tab的时候能够不再重新书写代码？如何提高我的代码的重用性/复用性？”

提到复用性/重用性，自然而然是“功能封装”，利用参数的传递进行控制。所以我们如此修改代码：

  1. <script>
  2.     function tab(titId, conId, titClass, conClass){
  3.         var tabTits = document.getElementById(titId).children,
  4.             tabCons = document.getElementById(conId).children,
  5.             len = tabTits.length;
  6.  
  7.         for (var i = 0; i < len; i++) {
  8.  
  9.             // 关键在于此处，为相应数组元素添加一个索引值属性
  10.             tabTits[i].index = i;
  11.             tabTits[i].onclick = function(){
  12.                 for (var i = 0; i < len; i++) {
  13.                     tabTits[i].className = '';
  14.                     tabCons[i].className = '';
  15.                 };
  16.                 // 此处利用this找到被点击的标题元素，然后获取到原来存储到这个元素（对象）身上的index属性
  17.                 tabTits[this.index].className = titClass;
  18.                 tabCons[this.index].className = conClass;
  19.             }
  20.         }
  21.     }
  22.     tab('tabTit','tabCon','select','show');
  23. </script>

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇：Tab切换效果[系列] - 通过children等DOM操作提升Tab切换的扩展性 下一篇：Tab切换效果[系列] - 原生AJAX技术实现Tab切换