如何在jQuery中实现移动端首个Tab标签页默认激活？

我来帮你搞定这个问题！你的代码里有两个关键问题导致移动端首个Tab无法默认激活，咱们一步步修复：

问题分析 #

1. 初始化缺失移动端激活状态：当前代码只在桌面端初始化显示了第一个Tab内容，但没有给对应的移动端抽屉标题添加激活类d_active，所以视觉上没有激活标识，也不符合你要的默认激活逻辑。
2. 抽屉点击事件代码顺序错误：你的抽屉点击事件里，return false;放在了同步桌面Tab状态的代码前面，导致这部分代码永远不会执行；同时也没有移除其他抽屉标题的激活类，会出现多个抽屉同时显示激活状态的问题。

修复后的完整代码 #

第一步：修正初始化逻辑 #

在页面加载完成时，不仅显示第一个Tab内容，还要给第一个抽屉标题加上激活类：

jQuery(document).ready(function ($) {
    $(".tab_content").hide();
    $(".tab_content:first").show();
    // 新增：给第一个移动端抽屉标题添加激活类
    $(".tab_drawer_heading:first").addClass("d_active");

    /* 标签页模式 */
    $("ul.tabs li").click(function() {
        $(".tab_content").hide();
        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_content").hide();
        var d_activeTab = $(this).attr("rel");
        $("#" + d_activeTab).fadeIn();
    });

    /* 抽屉模式 */
    $(".tab_drawer_heading").click(function() {
        $(".tab_content").hide();
        var d_activeTab = $(this).attr("rel");
        $("#" + d_activeTab).fadeIn();
        
        // 先移除所有抽屉标题的激活类，再给当前添加
        $(".tab_drawer_heading").removeClass("d_active");
        $(this).addClass("d_active");
        
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).fadeIn();
        
        // 同步桌面端Tab的激活状态（把return false移到最后，让这部分代码执行）
        $("ul.tabs li").removeClass("active");
        $("ul.tabs li[rel^='" + d_activeTab + "']").addClass("active");
        
        return false;
    });
});

第二步：优化HTML（可选但推荐） #

去掉第一个.tab_content的内联style="display: none;"，让JS统一控制显示状态，避免逻辑冲突：

<div class="tab_container">
    <h3 class="tab_drawer_heading" rel="tabdescription">
        <span> توضیحات </span>
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </h3>
    <div id="tabdescription" class="tab_content">
        <div class="item-content-inner">
            <h2>توضیحات</h2>
        </div>
    </div>
</div>

修复说明 #

• 初始化时给第一个抽屉标题添加d_active类，确保移动端打开页面时，首个Tab内容默认显示且标题处于激活状态
• 调整抽屉点击事件中return false;的位置，让同步桌面Tab状态的代码正常执行，保证移动端和桌面端状态一致
• 新增移除所有抽屉标题激活类的逻辑，避免多个抽屉同时显示激活状态，交互更严谨

这样修改后，你的Tab切换在桌面端和移动端都能正常工作，且移动端首个Tab会默认激活显示啦！

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