如何在编程激活jQuery Tools Tabs时触发面板Ajax加载？

问题已解决

我曾犹豫是否删除此问题，但最终保留，希望能帮助遇到相同问题的人。若感兴趣，可查看我的答案获取一种可行解决方案。

我用jQuery Tools Tabs实现了一套标签页，点击标签会动态加载对应面板的内容。标签展示各类别（如鱼类、水果、蔬菜），页面加载时（比如香蕉页面）会显示所属类别（水果）的信息，同时通过代码激活对应的标签。

几乎所有功能都正常：

• 标签切换功能正常
• 点击标签时面板内容能正常通过Ajax加载
• 页面加载时能正确激活对应标签

存在的问题：

• 初始通过代码激活标签时，没有触发Ajax加载面板内容的操作

推测原因是jQuery Tools拦截了<li>标签的编程点击事件，阻止了事件传播到子元素<a>上。我需要找到解决方法：要么修改jQuery Tools，让<li>的点击事件处理完成后能传播到子<a>元素；要么给jQuery Tabs添加后置处理函数，补充执行Ajax加载操作。

以下是代码片段，顺序与实际使用一致：

标签代码：

<ul id="categories" class="subtabs" style="margin-top:1em">
    <li id="category_tab_1"><a href="#">Fishes</a></li>
    <li id="category_tab_2"><a href="#">Fruits</a></li>
    <li id="category_tab_3"><a href="#">Vegetables</a></li>
 </ul>

面板代码（每个面板初始为空）：

<div id="pane_1" class="subpane" style="padding:0px" ></div>
    <div id="pane_2" class="subpane" style="padding:0px" ></div> 
    <div id="pane_3" class="subpane" style="padding:0px" ></div>

实现标签功能（使用jQuery Tools原生特性）：

jQuery("ul.subtabs").tabs(".subpane");   // 初始化标签页

动态加载数据（点击标签内的锚点时加载对应面板数据）：

jQuery("ul#categories > li > a").click(function (event) {        
    // 检测锚点所属标签，通过Ajax加载数据到对应面板
    jQuery.ajax({
      ...
    });
  });

检测页面所属类别并设置激活标签：

<?php

    $tabindex = 0;  // 默认值
    
    switch ($this->CATEGORY){ // 根据类别映射到标签索引
      case 1 : $tabindex = 0; break;  // 鱼类
      case 2 : $tabindex = 1; break;  // 核果（对应水果标签）
      case 3 : $tabindex = 1; break;  // 仁果（对应水果标签）
      case 4 : $tabindex = 2; break;  // 蔬菜
    };
      
    echo 'var api = jQuery("ul#category_tabs").data("tabs");';
    echo 'api.click('.$tabindex.');';
  ?>

内容的提问来源于stack exchange，提问作者OuzoPower