使用Bootstrap Tabs选项卡Ajax加载数据实现

<li class="active">
 <a href="#home" data-toggle="tab" name="menu-ctrl"> 
 <span class="glyphicon glyphicon-home">&nbsp;</span> 主页 
 <span class="sr-only">(current)</span> 
 </a>
</li>
<li>
 <a href="#test-paper"> 
 <span class="glyphicon glyphicon-list-alt">&nbsp;</span> 试卷库
 </a>
</li>
<li>
 <a href="#favorite"> 
 <span class="glyphicon glyphicon-bookmark">&nbsp;</span> 我的收藏
 </a>
</li>
<li>
 <a href="#about">
 <span class="glyphicon glyphicon-info-sign">&nbsp;</span> 关于
 </a>
</li> <!--- /. Nav tabs--->


<div id="myTabContent" class="tab-content">
 <!-- 试卷库页面 -->
 <div class="tab-pane fade" id="test-paper"></div>
 <!-- 收藏页面 -->
 <div class="tab-pane fade" id="favorite"></div>
 <!-- 关于页面 -->
 <div class="tab-pane fade" id="about"></div>
 <!-- 用户信息页面 -->
 <div class="tab-pane fade" id="user-info-page"></div>
</div> <!--- /.tab-content ---->

$("a[href=['#about']").click(function(e){
 $(this).tab('show');
 e.preventDefault(); //阻止a标签的默认行为
});

/
  激活tab选项卡并使用ajax异步加载内容 
 @param {Object} tabsId
 @param {Object} url
 /
function showTabs(tabsId,url) {
 $("a[href='#"+tabsId+"']").tab('show');
 var $tabContent = $('#'+tabsId);
 if($tabContent.length < 100) {
 $tabContent.load(url);
 //console.info(tabsId + ' load done!');
 }
}

//依次为每个tab导航a标签添加单击事件
$('a[href="#test-paper"]').click(function(e) {
 showTabs('test-paper','pages/test-paper.jsp');
 e.preventDefault();
});

//$('a[href=..]')...
//..
//.. 这么长的代码!!

//准备tabs数据
var tabsData = [{
 "id" : "test-paper",
 "url" : "pages/test-paper.jsp"
},{
 "id" : "favorite",
 "url" : "pages/favorite.jsp"
},{
 "id" : "about",
 "url" : "pages/about.jsp"
},{
 "id" : "user-info-page",
 "url" : "pages/user-info.jsp"
}];

//遍历json数组,循环添加a标签click事件:
$(tabsData).each(function(){
 //console.info(this.id + "--->" + this.url);
 $("a[href='#"+this.id+"']").click(function(e) {
 showTabs(this.id,this.url);
 e.preventDefault();
 });
});

$(tabsData).each(function(){
 //console.info(this.id + "--->" + this.url);
 $("a[href='#"+this.id+"']").bind('click',{
 id : this.id,
 url : this.url
 },tabsHandler);
});
function tabsHandler(event) {
 var data = event.data;
 showTabs(data.id,data.url);
 return false; //阻止默认a标签响应
}