jQuery首次点击无法加载内容问题排查求助

看起来你的问题主要出在两个关键地方：事件绑定的目标元素不匹配，以及加载内容时用了错误的路径。让我一步步拆解并给出修复方案：

问题1：事件绑定的选择器不对 #

你的jQuery代码把点击事件绑定到了.row li，但从HTML结构来看，你的tab列表是放在.mainTabs ul li里的。这就导致首次点击「Certificates」的时候，根本没触发你写的点击事件，自然不会加载任何内容。只有当你点击属于.row li的其他链接时，才会触发事件——这就是为什么你说必须点其他链接后才能加载的原因。

问题2：加载路径用了页面锚点而非实际URL #

你的tab链接的href是#skills、#certificates这种页面锚点，但load()方法需要的是服务器端的实际URL（比如Django通过{% url %}生成的路径）。用锚点作为load()的参数，浏览器只会尝试定位到页面内的锚点位置，不会请求新的内容。

修正后的代码 #

第一步：修改HTML，给链接添加实际URL的数据源 #

我们给每个tab的<a>标签加一个data-url属性，用来存储对应内容的实际Django URL，同时保留href作为锚点用来切换tab显示：

<div class="mainTabs">
    <ul>
        <li class="activeTab">
            <a href="#skills" data-url="{% url 'skills' %}">Skills</a>
        </li>
        <li id="secondTab">
            <a href="#certificates" data-url="{% url 'certificates' %}">Certificates</a>
        </li>
    </ul>
    <div class="tabsContent">
        <div id="skills" class="tab active">{% include "./_skills.html" %}</div>
        <div class="tab" id="certificates">{% include "./_certsList.html" %}</div>
    </div>
</div>

第二步：修正jQuery的事件绑定与加载逻辑 #

把事件绑定到正确的tab元素上，并且从data-url获取实际加载路径，同时可以顺便加上tab内容的切换逻辑：

$(document).ready(function(){
    // 初始加载aboutme内容
    $('.textBox h3').load("{% url 'aboutme' %}");
    
    // 绑定正确的tab点击事件
    $('.mainTabs ul li').on('click', function(e){
        e.preventDefault();
        
        // 切换技能链接的激活状态
        $('.activeSkill').removeClass('activeSkill');
        $(this).find('a').addClass('activeSkill');
        
        // 获取要加载的目标URL
        const targetUrl = $(this).find('a').data('url');
        // 加载内容到目标元素
        $('.textBox h3').load(targetUrl);
        
        // 额外：切换tab内容的显示状态（如果需要的话）
        $('.tab.active').removeClass('active');
        $($(this).find('a').attr('href')).addClass('active');
    });
});

这样修改后，首次点击任意tab都会触发事件，加载对应的内容，同时也能正确切换tab的激活状态啦。

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