原文地址：https://www.blog-china.cn/liuzaiqingshan/home/37/1497495953226
大概说下需求： 当点击不同的TAB选项卡，我希望通过AJAX加载不同的html页面或者请求，而不是事先将DIV都加载到 这个页面中。
废话不多说，直接 上代码：
1<!DOCTYPE html> 2<html lang="zh-CN"> 3<head> 4 <title> CDCN - 码上中国 www.blog-china.cn</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <meta name="keywords" 7 content="Bootstrap blog , queryBuilder 博客,jquery queryBuildder , queryBuilder 博客,queryBuilder 论坛,queryBuilder 技术,Bootstrap 博客 "/> 8 <link rel="stylesheet" href="../../bootstrap-3.3.5-dist/css/bootstrap.min.css" type="text/css"> 9 10 11 <script type="text/javascript" src="../../js/jquery-1.12.4.min.js"></script> 12 <script type="text/javascript" src="../../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> 13 <script type="text/javascript"> 14 $(function () { 15 //准备tabs数据 16 var tabsData = [{ 17 "id" : "test-paper", 18 "url" : "IE8.html" 19 },{ 20 "id" : "favorite", 21 "url" : "erweima.html" 22 },{ 23 "id" : "about", 24 "url" : "document_index.html" 25 },{ 26 "id" : "user-info-page", 27 "url" : "my_resosurce.html" 28 }]; 29 30 //遍历json数组,循环添加a标签click事件: 31 $(tabsData).each(function(){ 32 //console.info(this.id + "--->" + this.url); 33 $("a[href='#"+this.id+"']").bind('click',{ 34 id : this.id, 35 url : this.url 36 },tabsHandler); 37 }); 38 39 40 41 }); 42 function tabsHandler(event) { 43 var data = event.data; 44 showTabs(data.id,data.url); 45 return false; //阻止默认a标签响应 46 } 47 48 /** 49 * 激活tab选项卡并使用ajax异步加载内容 50 * @param {Object} tabsId 51 * @param {Object} url 52 */ 53 function showTabs(tabsId,url) { 54 $("a[href='#"+tabsId+"']").tab('show'); 55 var $tabContent = $('#'+tabsId); 56 if($tabContent.length < 100) { 57 $tabContent.load(url); 58 //console.info(tabsId + ' load done!'); 59 } 60 } 61 62 //依次为每个tab导航a标签添加单击事件 63 $('a[href="#test-paper"]').click(function(e) { 64 showTabs('test-paper','pages/test-paper.jsp'); 65 e.preventDefault(); 66 }); 67 68 </script> 69 70 <!-- cropper end--> 71</head> 72<body> 73 74<!-- content --> 75<div class="container bs-docs-container"> 76 <div class="row"> 77 <div class="col-md-3" role="complementary"> 78 <ul id="myTab" class="nav nav-pills nav-stacked"> 79 <li class="active"> 80 <a href="#home" data-toggle="tab" name="menu-ctrl"> 81 <span class="glyphicon glyphicon-home"> </span> 主页 82 <span class="sr-only">(current)</span> 83 </a> 84 </li> 85 <li> 86 <a href="#test-paper"> 87 <span class="glyphicon glyphicon-list-alt"> </span> 试卷库 88 </a> 89 </li> 90 <li> 91 <a href="#favorite"> 92 <span class="glyphicon glyphicon-bookmark"> </span> 我的收藏 93 </a> 94 </li> 95 <li> 96 <a href="#about"> 97 <span class="glyphicon glyphicon-info-sign"> </span> 关于 98 </a> 99 </li> 100 101 </ul> 102 </div> 103 <div class="col-md-9" role="main"> 104 <div id="myTabContent" class="tab-content"> 105 <!-- 试卷库页面 --> 106 <div class="tab-pane fade" id="test-paper"></div> 107 <!-- 收藏页面 --> 108 <div class="tab-pane fade" id="favorite"></div> 109 <!-- 关于页面 --> 110 <div class="tab-pane fade" id="about"></div> 111 <!-- 用户信息页面 --> 112 <div class="tab-pane fade" id="user-info-page"></div> 113 </div> 114 </div> 115 </div> 116</div> 117 118</body> 119</html>
效果如下： 