我仔细看了你的代码和描述，发现问题出在移动端标签的点击事件逻辑里，下面是具体分析和修复方案：

问题分析 #

1. return false位置错误：在移动端的.tab_drawer_heading点击事件中，你把return false;写在了移除旧激活状态的代码之前，导致后面的$("ul.tabs li").removeClass("active")等代码完全不会执行，旧的标签激活状态没被清除，内容切换逻辑也出问题。
2. 未清除其他标题的激活类：点击新的移动端标题时，没有移除其他.tab_drawer_heading的d_active类，导致之前的标题仍显示为激活状态。
3. 重复的内容显示逻辑：代码里重复调用了fadeIn()，逻辑冗余且容易冲突。

修复后的代码 #

$("ul.tabs li").click(function() {
    // 隐藏所有内容
    $(".tab_content").hide();
    // 获取当前标签对应的内容ID
    var activeTab = $(this).attr("rel");
    // 显示对应内容
    $("#" + activeTab).fadeIn();

    // 切换桌面端标签的激活状态
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");

    // 切换移动端标题的激活状态
    $(".tab_drawer_heading").removeClass("d_active");
    $(".tab_drawer_heading[rel^='" + activeTab + "']").addClass("d_active");
});

/* 移动端抽屉模式处理 */
$(".tab_drawer_heading").click(function() {
    // 隐藏所有内容
    $(".tab_content").hide();
    // 获取当前标题对应的内容ID
    var d_activeTab = $(this).attr("rel");
    // 显示对应内容
    $("#" + d_activeTab).fadeIn();

    // 切换移动端标题的激活状态：先移除所有，再给当前添加
    $(".tab_drawer_heading").removeClass("d_active");
    $(this).addClass("d_active");

    // 同步更新桌面端标签的激活状态
    $("ul.tabs li").removeClass("active");
    $("ul.tabs li[rel^='" + d_activeTab + "']").addClass("active");

    // 阻止默认跳转（放在最后，不影响前面的逻辑）
    return false;
});

关键修改说明 #

• 把return false;移到移动端点击事件的最后，确保所有状态切换逻辑都能执行。
• 在点击移动端标题时，先移除所有.tab_drawer_heading的d_active类，再给当前标题添加，保证只有一个激活标题。
• 移除了重复的内容显示代码，让逻辑更清晰。

关于你猜测的“初始状态移除d_active类”：其实如果初始时只有一个标签激活，那不需要额外处理；但如果初始有多个激活状态，那确实需要在页面加载时清除多余的d_active和active类，只保留默认激活的那个。比如可以在代码开头加上：

// 初始化：只保留第一个标签的激活状态
$("ul.tabs li:not(:first)").removeClass("active");
$(".tab_drawer_heading:not(:first)").removeClass("d_active");
$(".tab_content:not(:first)").hide();

这样就能确保初始状态只有第一个标签和内容是激活显示的，移动端点击时也能正确切换隐藏/显示。

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