jQuery不会在首次点击时加载内容

Question

我有一个简短的脚本，可将给定链接的内容加载到元素中。 内容取决于单击的链接的ID。 我面临的问题是，它永远不会在第一次单击时加载内容。 我需要单击另一个主链接，然后才加载。 让您告诉我我所拥有的：

<div class="mainTabs">
<ul>
  <li class="activeTab"><a href="#skills">Skills</a></li>
  <li id="secondTab"><a href="#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>

jQuery是：

  $(document).ready(function(){
$('.textBox h3').load("{% url 'aboutme' %}");
$('.row li').on('click', function(e){
  e.preventDefault();
  $('.activeSkill').removeClass('activeSkill');
  $(this).find('a').addClass('activeSkill');
  var link = $(this).find('a').attr('href');
  $('.textBox h3').load(link);
});
});

假设我点击“证书”。 仅当我单击另一个链接后，才开始加载下面的页面。 这可能是什么问题？

Answer 1

我在没有完整示例的情况下难以理解，但是我对此的解释是逻辑似乎是错误的：

以下行从DOM中删除了所有“ activeSkill”类。

$('.activeSkill').removeClass('activeSkill');

下一行将'activeSkill'类添加到所单击的<li>下的<a> 。

$(this).find('a').addClass('activeSkill');

您能解释一下activeSkill的作用是什么？ 另外，您是否不应该在选定的选项卡<div>上设置active类，并将其从当前活动的<div>删除？