Question

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

问题：我正在尝试在用户点击“下载”标签时加载文件列表，而不是在此之前。到目前为止我所尝试的是以下..系统无法触发警报消息也返回Tab索引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');          
        }
    }
 });
});

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

1 个答案: