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

您当前位于：原生JS实战开发 ——> Tab切换效果[系列] - jQuery的AJAX技术实现Tab切换
上一篇：Tab切换效果[系列] - 原生AJAX技术实现Tab切换 下一篇：如何让网页文章中的代码可以点击运行

Tab切换效果[系列] - jQuery的AJAX技术实现Tab切换

2015/05/09 14:50:47 | 作者：HTML5学堂（码匠） | 分类：原生JS实战开发 | 关键词：Tab切换,AJAX,jQuery

从一个简单的Tab切换开始——JQ+AJAX+Tab

HTML5学堂：jQuery是现在前端常用JavaScript框架之一，Tab切换也是现在网页中常用的效果之一。当Tab切换的内容比较多的时候，为了良好的用户体检，加快网页的加载速度，我们可以使用AJAX来实现。

在《从一个简单的Tab切换开始——与AJAX的结合》这篇文章中，我们使用原生JavaScript实现AJAX的Tab切换。今天我们使用jQuery来实现AJAX的Tab切换。

先来准备需要加载的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. ]

先进行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>

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>

欢迎沟通交流~HTML5学堂

从一个简单的Tab切换开始——JQ处理Tab切换

  1. $('#tabTit li').click(function(){
  2.     var index = $(this).index();
  3.     $(this).addClass('select').siblings().removeClass('select');
  4.     $('#tabCon div').eq(index).addClass('show').siblings().removeClass('show');
  5. });

从一个简单的Tab切换开始——JQ+AJAX+Tab

  1. <script src='js/jquery-1.9.1.js'></script>
  2. <script>
  3.     $('#tabTit li').click(function(){
  4.         var index = $(this).index();
  5.         $.getJSON('tab.json',function(data){
  6.             $('#tabConTit').html(data[index].tit);
  7.             $('#tabInf').html(data[index].con);
  8.         })
  9.         $(this).addClass('select').siblings().removeClass('select');
  10.     });
  11. </script>

效果全码

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Tab-独行冰海</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{
  31.             width: 373px;
  32.             height: 400px;
  33.             border: 1px solid #00f;
  34.             border-top: none;
  35.         }
  36.         .tabCon h1{
  37.             font-size: 24px;
  38.         }
  39.         .tabCon p{
  40.             text-indent: 2em;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div id='tab' class='tab'>
  46.         <ul id='tabTit' class='tabTit'>
  47.             <li class='select'>标题一</li>
  48.             <li>标题二</li>
  49.             <li>标题三</li>
  50.         </ul>
  51.         <div class='tabCon'>
  52.             <h1 id='tabConTit'>独行冰海的博客</h1>
  53.             <p id='tabInf'>独行冰海的博客创建于2006年8月，那时申请博客似乎是在邮箱申请的时候误点误撞的。到了2009年才开始动手写博客。渐渐发现博客的重要作用。</p>
  54.         </div>
  55.     </div>
  56. </body>
  57. <script src='js/jquery-1.9.1.js'></script>
  58. <script>
  59.     $('#tabTit li').click(function(){
  60.         var index = $(this).index();
  61.         $.getJSON('tab.json',function(data){
  62.             $('#tabConTit').html(data[index].tit);
  63.             $('#tabInf').html(data[index].con);
  64.         })
  65.         $(this).addClass('select').siblings().removeClass('select');
  66.     });
  67. </script>
  68. </html>

欢迎沟通交流~HTML5学堂

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

HTML5学堂

原创前端技术分享

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

原创视频课程

用心打造精品课程

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

小程序-决胜前端

前端面试题宝库

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

HTML5布局之路

非传统模式讲解前端

上一篇：Tab切换效果[系列] - 原生AJAX技术实现Tab切换 下一篇：如何让网页文章中的代码可以点击运行