从一个简单的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学堂