HTML5学堂-码匠 HTML5学堂

您当前位于:原生JS 实战开发 ——> Tab切换效果[系列] - 原生AJAX技术实现Tab切换

Tab切换效果[系列] - 原生AJAX技术实现Tab切换

2015/05/08 00:01:25 | 作者:HTML5学堂(码匠) | 分类:原生JS 实战开发 | 关键词:Tab切换,AJAX,Tab,JSON

从一个简单的Tab切换开始——与AJAX的结合

HTML5学堂:Tab切换效果是一个很常用很简单的效果,但是我们可以通过很多种方法实现出来。当Tab切换内容中数据量大的时候,为了良好的用户体验,加快网页的加载速度,我们可以利用AJAX来加载Tab切换中的内容。

在敲击这个效果的时候,我们很多人都会思考的一个问题就是:“为何我们要使用Tab切换功能呢?”Tab切换的优势在于它能够使用很小的一片空间区域展示大量的信息,从用户体验角度来看,一个页面中能够看到的信息变得多了,同时,没有加大信息占据的空间范围,不需要持续性的滚动滑轮,从这一方面讲,可以说是提升了用户体验。

但是,与此同时带来的还有一个现象,大量的信息呈现,并非是自动摆在用户面前,是需要用户进行操作的(无论是鼠标点击还是鼠标移上),那么此时,我们并不能够确定用户是不是会点击Tab的标题区域,如果我们一个网页当中存在大量的Tab切换,同时,每个Tab格中的信息量很庞大,但是用户并不会每个都去点击而直接跳转页面,那么一个页面我们就需要加载大量冗余的信息。从这个角度来说,用户体验不升反降。

为了解决这个问题,我们通过使用AJAX异步加载来解决这个问题。

先来准备需要加载的json数据:

  1. [
  2.     {
  3.         "tit" : "独行冰海的博客",
  4.         "con" : "独行冰海的博客创建于2006年8月,那时申请博客似乎是在邮箱申请的时候误点误撞的。到了2009年才开始动手写博客。渐渐发现博客的重要作用。"
  5.     },
  6.     {
  7.         "tit" : "独行冰海的微博",
  8.         "con" : "独行冰海的微博创建时间有些晚了,已经是2012年的事情了,或许是在大学中过于封闭的生活所至,对于微博,一直没有很高的关注度,但不得不说,微博是专业信息汇集的一个好地方。"
  9.     },
  10.     {
  11.         "tit" : "独行冰海的教育之路",
  12.         "con" : "独行冰海在2011年踏上了教育的旅途,而今已经三年了,三年来,一直遵循着自己的原则:从不以从不以“地位”、“权力”为目标,只为了自己心底的梦、珍重的事、守护的情而奋斗。"        
  13.     }
  14. ]

在此,HTML5学堂发布了最为普遍的一种加载方式,关于AJAX的一些基本知识,可以参见之前的文章,列表如下:

AJAX中的同步加载与异步加载

XML与JSON的基本知识

AJAX兼容

WEB前端开发 常见HTTP状态码

先进行HTML结构的基本修改和样式处理

HTML结构调整:

  1. body>
  2.     <div id='tab' class='tab'>
  3.         <ul id='tabTit' class='tabTit'>
  4.             <li class='select'>标题一</li>
  5.             <li>标题二</li>
  6.             <li>标题三</li>
  7.         </ul>
  8.         <div id='tabCon' class='tabCon'>
  9.             <h1></h1>
  10.             <p></p>
  11.         </div>
  12.     </div>
  13. </body>

欢迎沟通交流~HTML5学堂

CSS样式处理:

  1. <style>
  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.     .tabTit li:hover{
  18.         background: #aaf;
  19.         cursor: hand;
  20.         cursor: pointer;
  21.     }
  22.     .tabTit .select{
  23.         background: #99f;
  24.     }
  25.     .tabCon{
  26.         width: 373px;
  27.         height: 400px;
  28.         border: 1px solid #00f;
  29.         border-top: none;
  30.     }
  31.     .tabCon h1{
  32.         font-size: 24px;
  33.     }
  34.     .tabCon p{
  35.         text-indent: 2em;
  36.     }
  37. </style>

JS调整:

  1. <script>
  2.     var tabTits = document.getElementById('tabTit').children,
  3.         tabInf = document.getElementById('tabInf'),
  4.         tabConTit = document.getElementById('tabConTit'),
  5.         len = tabTits.length;
  6.     var tabData = null;        // 用于存储数据
  7.     
  8.     for (var i = 0; i < len; i++) {
  9.         tabTits[i].index = i;
  10.         tabTits[i].onclick = function(){
  11.             var _this = this;
  12.             
  13.             if (!tabData) {
  14.                 var xhr = new XMLHttpRequest();
  15.                 var url = 'tab.json';
  16.                 xhr.open('get', url, true);
  17.                 xhr.send(null);
  18.                 xhr.onload = function(){
  19.                     tabData = JSON.parse(xhr.responseText);
  20.                     tabConTit.innerHTML = tabData[_this.index].tit;
  21.                     tabInf.innerHTML = tabData[_this.index].con;
  22.                 }
  23.             for (var i = 0; i < len; i++) {
  24.                 tabTits[i].className = '';
  25.             };
  26.             _this.className = 'select';
  27.             }else{
  28.                 tabConTit.innerHTML = tabData[_this.index].tit;
  29.                 tabInf.innerHTML = tabData[_this.index].con;
  30.             }
  31.         }
  32.     };
  33. </script>

此处调用了json数据,如果申请的是HTML文件,则效果更为明显

欢迎沟通交流~HTML5学堂

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

HTML5学堂

原创前端技术分享

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

原创视频课程

用心打造精品课程

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

小程序-决胜前端

前端面试题宝库

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

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS