如何使用Ajax和jQuery为基于内容加载的标签页动态添加/移除active类

我看了你代码里的问题啦——现在你只给当前点击的li添加了active类，但没移除其他li的；而且对应的内容div也完全没处理active状态的切换。咱们一步步来修复：

问题分析 #

1. 现有代码只给匹配的li加active，没有先清除其他li的该类，导致多个li会同时处于激活状态。
2. 内容区域的div.tab-pane也需要同步切换active和in类（因为用了Bootstrap的fade动画），这部分你之前没做处理。
3. 注意属性名的一致性：你HTML里用的是datalanding-target，JS里写的是dataLanding-target，虽然jQuery能兼容，但规范写法应该用全小写的data-landing-target，避免潜在问题。

修改后的完整代码 #

JavaScript部分

$(function() {
  $("ul#myTab>li>a.custLink_tabs").click(function(e) {
    e.preventDefault(); // 用这个代替return false，逻辑更清晰
    const $currentLink = $(this);
    // 获取目标页面和对应的tab内容ID
    const pageurl = $currentLink.attr("data-landing-target"); // 统一属性名
    const landingtabId = $currentLink.attr("data-landing");

    // 第一步：切换li的active类
    $("ul#myTab li").removeClass("active"); // 先移除所有li的active
    $currentLink.parent("li").addClass("active"); // 给当前li加active

    $.ajax({
      cache: false,
      url: pageurl,
      success: function(data) {
        const $targetTab = $("#" + landingtabId);
        // 第二步：切换内容div的active状态
        $(".tab-content .tab-pane").removeClass("active in"); // 清除所有内容div的激活类
        $targetTab.html(data).addClass("active in"); // 给目标div加激活类，保留fade动画效果

        // 可选：如果需要模拟浏览器历史更新，可以加这段
        // if (pageurl != window.location){
        //   window.history.pushState({path:pageurl}, '', pageurl);
        // }
      },
      error: function(jqHXR, textStatus) {
        if (textStatus === "timeout") {
          alert("请求超时，请稍后重试！");
        }
      },
      timeout: 10000,
    });
  });
});

HTML部分（修正属性名）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabbable">
  <ul class="nav nav-tabs" id="myTab">
    <li class="active">
      <!-- 把datalanding-target改成规范的data-landing-target -->
      <a class="custLink_tabs" data-landing-target="./pages1.php" data-landing="tua-tab-1">TAB 1</a>
    </li>
    <li>
      <a class="custLink_tabs" data-landing-target="./pages2.php" data-landing="tip-tab-2">TAB 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="tua-tab-1" class="tab-pane fade active in">
      <!-- 初始内容或Ajax加载后填充 -->
    </div>
    <div id="tip-tab-2" class="tab-pane fade"></div>
  </div>
</div>

关键修改点说明 #

• li的active切换：点击时先移除所有ul#myTab li的active类，再给当前点击链接的父li添加类，确保同一时间只有一个激活标签。
• 内容div的切换：在Ajax成功回调里，先清除所有.tab-pane的active和in类（Bootstrap的fade动画依赖in类显示内容），再给目标div添加这两个类并填充加载的内容。
• 属性名规范：把datalanding-target改为data-landing-target，符合HTML5 data属性的命名规则（全小写、连字符分隔），避免jQuery获取属性时出现意外问题。
• 事件处理优化：用e.preventDefault()代替return false，更明确地阻止默认跳转行为，代码可读性更强。

这样修改后，点击标签时就能同步切换li和对应内容div的激活状态啦，和Bootstrap标签页的交互逻辑一致，同时保留了你需要的Ajax加载内容功能。

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