仅在一个jquery选项卡中加载AJAX页面

Question

背景：我有类别调用ajax页面并打印在DIV标签中。这个AJAX页面从数据库中提取内容，并分为2部分（第1部分常规内容显示，第2部分jQuery选项卡（功能，规格和下载选项卡））。所有选项卡打印从数据库中获取的信息，但最后一个选项卡即Downloads选项卡具有另一个<DIV>标签，该标签将加载PDF和ZIP文件的关联列表供下载。

Issue：我试图加载文件列表，当用户点击下载选项卡上，而不是之前。到目前为止，我曾尝试是下面的。系统无法触发警报消息还返回标签索引ID

<div id="tabs"> 
    <ul> 
    <li><a href="#tab_feature">Features</a></li> 
    <li><a href="#tab_specification">Specifications</a></li> 
    <li><a href="#tab_download" data-id="3">Downloads</a></li> 
    </ul> 

    <div id="tab_feature"> 
    <div> 
     Tab Features 
    </div> 
    </div> 

    <div id="tab_specification"> 
     Tab Specificications 
    </div> 

    <div id="tab_download"> 
    <p>Below listed are the related files that can be downloaded to you PC.</p> 
     <div id="downloadFilesList"></div> 
    </div> 
</div> 

<script> 
$(function() 
{ 
    $('#tabs').tabs(
    { 
     select: function(event,ui) 
     { 
      var intSelectedIndex = ui.index; 

      alert('selected: ' + intSelectedIndex); 

      if (intSelectedIndex == 2) 
      { 
       $("#downloadFilesList").load('loadfiles.asp', function (response, status, xhr) 
       { 
       ..... 
       } 
      } 
     } 
    }); 
}); 
</script> 

我想补充的，我使用jQuery以下

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> 
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script> 
<link href="//code.jquery.com/ui/1.11.0/themes/humanity/jquery-ui.css" rel="stylesheet"> 

添加JSFiddle

Answer 1

使用

select: function(event,ui) 

代替

activate: function (event, ui) { 

或

beforeActivate: function(event, ui) {} 

要了解更多关于标签，请仔细阅读本Link

编辑

$(document).ready(function() 
{ 
$('#tabs').tabs(
{ 
    activate: function (event, ui) 
    { 
     var intSelectedIndex = ui.index; 

     var intSelectedIndexs=ui.newPanel.selector; 

     if ($.trim(intSelectedIndexs) == "#tab_download") 
     { 
     alert("This is Download:");//$('.downloadFakeClass').load('www.google.com');   
     } 
    } 
}); 
});