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

您当前位于：原生JS实战开发 ——> Tab切换效果[系列] - Tab切换基本功能分析与讲解
上一篇：没有了 下一篇：Tab切换效果[系列] - 通过children等DOM操作提升Tab切换的扩展性

Tab切换效果[系列] - Tab切换基本功能分析与讲解

2015/04/29 22:23:26 | 作者：HTML5学堂（码匠） | 分类：原生JS实战开发 | 关键词：Tab切换,JavaScript,基本功能

从一个简单的Tab切换开始——从基本功能开始

HTML5学堂：Tab切换，效果看上去实现挺简单的，但是在用各种方式实现它的过程中，我们可以接触到各类知识点。学知识是螺旋式的，仅仅得到一个问题的答案不是最为关键的，关键的是如何去优化我们的答案，丰富我们的知识。Tab切换，一个简单的效果，大家一起开始~

从一个简单的Tab切换开始

Tab切换可以说被众多的开发者公认为最为简单，也是入门前端最为容易的一个效果

如果从效果的基本实现来讲，的的确确，是很简单。但是，当我们从代码的质量、性能等各个角度去看这个效果时，我们会发现，其实想写好一个Tab切换，也并没有那么简单。

先来看效果截图

HTML5学堂 Tab01 H5course

Tab切换效果的基本代码：

  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'>独行冰海的博客</div>
  51.             <div>欢迎光临</div>
  52.             <div>一切都从Tab开始</div>
  53.         </div>
  54.     </div>
  55. </body>
  56. <script>
  57.     var tab = document.getElementById('tab');
  58.     var tabTit = document.getElementById('tabTit');
  59.     var tabCon = document.getElementById('tabCon');
  60.     var tabTits = tabTit.getElementsByTagName('li');
  61.     var tabCons = tabCon.getElementsByTagName('div');
  62.     for (var i = 0; i < tabTits.length; i++) {
  63.         tabTits[i].onclick = function(i){
  64.             var num = i;
  65.             return function(){
  66.                 for (var i = 0; i < tabTits.length; i++) {
  67.                     tabTits[i].className = '';
  68.                     tabCons[i].className = '';
  69.                 };
  70.                 tabTits[num].className = 'select';
  71.                 tabCons[num].className = 'show';
  72.             }
  73.         }(i);
  74.     };
  75. </script>
  76. </html>

接下来我们看看可以从哪方面进行优化：

进行样式、结构、行为代码的相分离

需要添加代码注释

进行代码质量的提升-命名、注释、空行

欢迎沟通交流~HTML5学堂

结构、样式、行为分离

首先，将代码拆分为三个部分，分别存放，结构如图：

HTML5学堂 文件夹结构 H5course

HTML

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Tab-独行冰海</title>
  6.     <link rel="stylesheet" href="css/tab.css">
  7. </head>
  8. <body>
  9.     <div id='tab' class='tab'>
  10.         <ul id='tabTit' class='tabTit'>
  11.             <li class='select'>标题一</li>
  12.             <li>标题二</li>
  13.             <li>标题三</li>
  14.         </ul>
  15.         <div id='tabCon' class='tabCon'>
  16.             <div class='show'>独行冰海的博客</div>
  17.             <div>欢迎光临</div>
  18.             <div>一切都从Tab开始</div>
  19.         </div>
  20.     </div>
  21. </body>
  22. <script src='js/tab.js'></script>
  23. </html>

CSS

  1. @charset 'utf-8';
  2. *{margin: 0;padding: 0;}
  3. .tab{
  4.     width: 375px;
  5.     margin: 25px auto;
  6. }
  7. .tabTit li{
  8.     float: left;
  9.     width: 123px;
  10.     height: 38px;
  11.     border: 1px solid #00f;
  12.     text-align: center;
  13.     background: #ccf;
  14.     line-height: 38px;
  15.     list-style: none;
  16. }
  17. .tabCon div{
  18.     width: 373px;
  19.     height: 400px;
  20.     border: 1px solid #00f;
  21.     border-top: none;
  22.     display: none;
  23. }
  24. .tabTit li:hover{
  25.     background: #aaf;
  26.     cursor: hand;
  27.     cursor: pointer;
  28. }
  29. .tabTit .select{
  30.     background: #99f;
  31. }
  32. .tabCon .show{
  33.     display: block;
  34. }

JavaScript

  1. var tab = document.getElementById('tab'),
  2.     tabTit = document.getElementById('tabTit'),
  3.     tabCon = document.getElementById('tabCon'),
  4.     tabTits = tabTit.getElementsByTagName('li'),
  5.     tabCons = tabCon.getElementsByTagName('div'),
  6.     len = tabTits.length;
  7. for (var i = 0; i < len; i++) {
  8.     tabTits[i].onclick = function(i){
  9.         var num = i;
  10.     
  11.         return function(){
  12.             for (var i = 0; i < len; i++) {
  13.                 tabTits[i].className = '';
  14.                 tabCons[i].className = '';
  15.             };
  16.             tabTits[num].className = 'select';
  17.             tabCons[num].className = 'show';
  18.         }
  19.     }(i);
  20. };

欢迎沟通交流~HTML5学堂

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

HTML5学堂

原创前端技术分享

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

原创视频课程

用心打造精品课程

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

小程序-决胜前端

前端面试题宝库

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

HTML5布局之路

非传统模式讲解前端

上一篇：没有了 下一篇：Tab切换效果[系列] - 通过children等DOM操作提升Tab切换的扩展性