Javascript 无法在使用jQuery单击的div之前添加前缀

我正试着用某个类来预编一个div，但我无法让它工作。我想从顶部导航中选择当前li的副本，并将其作为h2标题发送给另一个导航。我试着以“current”类为目标，然后获取它的值，并将其预编到另一个nav，但没有成功。很抱歉，如果这听起来让人困惑，但是一旦您签出并运行代码段，您就会明白。谢谢你的帮助

$（文档）.ready（函数（）{
var collageID=$（'.colleGetTypeNav.tab'）.first（）.addClass（'current'）.data（'tabid'）；
var aboutID=$（'.aboutCollegeNav.tab'）.first（）.addClass（'current'）.data（'tabid'）；
showDiv（）；
$（'.colleGetTypeNav.tab'）。单击（函数（）{
$（'.CollegetTypeNav.tab'）.removeClass（'current'）；
collageID=$（this）.addClass（'current'）.data（'tabid'）；
showDiv（）；
});
$（'.aboutCollegeNav.tab'）。单击（函数（）{
$（'.aboutCollegeNav.tab'）.removeClass（'current'）；
aboutID=$（this）.addClass（'current'）.data（'tabid'）；
showDiv（）；
});
函数showDiv（）{
$（'.mainContent>div'）.hide（）；
if（collageID&&aboutID）{
$（'.mainContent'）.find（'[data blockid=“'+collageID+'+aboutID+']'）.show（）；
}
}
//获取当前从顶部导航单击的li的文本，以作为h2进入另一个导航。
var toAdd=$（'.colleGetTypeNav.tab.current'）.text（）；
var item=$（“”+toAdd+”更新js代码

在aboutCollegeNav中添加默认H2


$（文档）.ready（函数（）{
var collageID=$（'.colleGetTypeNav.tab'）.first（）.addClass（'current'）.data（'tabid'）；
var aboutID=$（'.aboutCollegeNav.tab'）.first（）.addClass（'current'）.data（'tabid'）；
showDiv（）；
$（'.colleGetTypeNav.tab'）。单击（函数（）{
$（'.CollegetTypeNav.tab'）.removeClass（'current'）；
$（'.aboutCollegeNav>h2'）.html（$（this.html（））；
collageID=$（this）.addClass（'current'）.data（'tabid'）；
showDiv（）；
});
$（'.aboutCollegeNav.tab'）。单击（函数（）{
$（'.aboutCollegeNav.tab'）.removeClass（'current'）；
aboutID=$（this）.addClass（'current'）.data（'tabid'）；
showDiv（）；
});
函数showDiv（）{
$（'.mainContent>div'）.hide（）；
if（collageID&&aboutID）{
$（'.mainContent'）.find（'[data blockid=“'+collageID+'+aboutID+']'）.show（）；
}
}
})；

工程

概述
统计
课程

为了实现你的目标，你需要做几件事。这肯定会更有效率，但只是改善你现有的

将
current
类添加到默认导航项（“工程”）中。此外，我没有每次都创建
，而是将其添加到html中，这样它就一直存在，只需要有内容

<nav class="collegeTypeNav">
  <ul>
    <li role="button" class="tab current" data-tabid="engineering">Engineering</li>
    <li role="button" class="tab" data-tabid="science">Science</li>
    <li role="button" class="tab" data-tabid="liberalArts">Liberal Arts</li>
  </ul>
</nav>

<nav class="aboutCollegeNav">
  <h2 class="navHeading"></h2>
  <ul>
    <li role="button" class="tab" data-tabid="overview">Overview</li>
    <li role="button" class="tab" data-tabid="statistics">Statistics</li>
    <li role="button" class="tab" data-tabid="courses">Courses</li>
  </ul>
</nav>


加载DOM后，函数的前3行将立即运行（document.ready）而不是单击顶部导航项。在第四行将该类添加到任何内容之前，第一行搜索
.current
。尝试将这些行移动到相应的处理程序。谢谢，但这并不能解决问题。您的代码似乎工作正常，检查是否有大量用于预结束div的代码。您有什么方法可以将其缩减仅针对您遇到问题的部分；a？抱歉。我刚刚删除了50%的HTML代码。我希望现在不会太长。谢谢！但是有没有办法动态获取默认h2而不是硬编码它？谢谢！但是您如何在不硬编码的情况下将工程作为默认h2？@Charly-您只需添加
showDiv（“工程”）；
，查看我的更新答案。谢谢！但问题是我将对多个页面/nav使用此算法，因此像上面的评论那样在HTML或JS中硬编码不是一个好主意。或者这是不可能的？@Charly-在这种情况下，您需要一个默认的当前选项卡，然后在页面加载时选择它。答案更新。问题现在解决了h2现在变为该导航的当前li（约为CollegenaV）。
  $(document).ready(function() {
  var collageID = $('.collegeTypeNav .tab').first().addClass('current').data('tabid');
  var aboutID = $('.aboutCollegeNav .tab').first().addClass('current').data('tabid');
  var defaultTab = $('nav.collegeTypeNav').find('.current').text();
  updateH2(defaultTab);
  showDiv();

  $('.collegeTypeNav .tab').click(function() {
    $('.collegeTypeNav .tab').removeClass('current');
    collageID = $(this).addClass('current').data('tabid');
    updateH2($(this).text());
    showDiv();
  });

  $('.aboutCollegeNav .tab').click(function() {
    $('.aboutCollegeNav .tab').removeClass('current');
    aboutID = $(this).addClass('current').data('tabid');
    showDiv();
  });

  function updateH2(toAdd) {
    $('.navHeading').text(toAdd);
  }

  function showDiv() {
    $('.mainContent > div').hide();
    if (collageID && aboutID) {
      $('.mainContent').find('[data-blockid="' + collageID + ' ' + aboutID + '"]').show();
    }
  }
});