jQuery选项卡检查类不检查类答案

【问题标题】：jQuery tab check class isn't checking for classjQuery选项卡检查类不检查类
【发布时间】：2018-09-20 10:30:24
【问题描述】：

我对 jQuery 有疑问。当我单击选项卡（标签）时，它会获得一个“活动”类。我想用 jQuery 或 javascript 检查哪个选项卡处于活动状态，当特定选项卡获得“活动”类时，我想添加和删除类。

https://jedantest.000webhostapp.com/explore.html

似乎代码可以运行，但现在的问题是我必须在性质选项卡上单击两次。

但由于某种原因，上面提供的代码不起作用。附带说明一下，是直接调用 ID 和类更好，还是将它们存储在变量中并将它们用作 var？

$("#cultureExplore, #historyExplore, #natureExplore").click(function() {
  if ($('#natureExplore').hasClass('active')) {
    ('#footerExplore').addClass('footerExploreNature');
    ('#footerExplore').removeClass('footerExploreElse');
  } else {
    ('#footerExplore').addClass('footerExploreElse');
    ('#footerExplore').removeClass('footerExploreNature');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul class="tabs tab-demo z-depth-1 center-align row" style="overflow: hidden;">
  <li class="tab col s4 "><a id="cultureExplore" class="active" href="#culture">Culture</a></li>
  <li class="tab col s4"><a id="historyExplore" href="#history">History</a></li>
  <li class="tab col s4"><a id="natureExplore" href="#nature">Nature</a></li>
</ul>
footer

<footer id="footerExplore" class="page-footer hide-on-small-and-down footerExploreElse">
  .........
</footer>

【问题讨论】：

请更新我制作的 sn-p 以包含 CSS 和相关的其他代码 - 您需要将 $ 添加到所有 ('#footerExplore')
您缺少一些$，因为('#footerExplore') 应该是$('#footerExplore')
$("li.tab>a").on("click",function(e) { e.preventDefault(); var isNature = this.id=="natureExplore" && $(this).is(".active"); $("#footerExplore").toggleClass("footerExploreNature",isNature); $("#footerExplore").toggleClass("footerExploreElse",!isNature); });
离开“自然”选项卡时它正在工作。问题是我仍然需要在性质选项卡上单击两次才能获得课程。

标签： javascript jquery html material-design materialize

【解决方案1】：

你没有正确引用元素 ('#footerExplore') 应该是 $('#footerExplore') 添加测试类来改变颜色。

$("#cultureExplore, #historyExplore, #natureExplore").click(function() {
  if ($('#natureExplore').hasClass('active')) {
    ($('#footerExplore')).removeClass('footerExploreElse').addClass('footerExploreNature');        
  } else {        ($('#footerExplore')).removeClass('footerExploreNature').addClass('test');
  }
});

.footerExploreNature {
  color: green;
}

.footerExploreElse {
  color: red;
}

.test {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs tab-demo z-depth-1 center-align row" style="overflow: hidden;">
  <li class="tab col s4 "><a id="cultureExplore" class="active" href="#culture">Culture</a></li>
  <li class="tab col s4"><a id="historyExplore" href="#history">History</a></li>
  <li class="tab col s4"><a id="natureExplore" href="#nature">Nature</a></li>
</ul>
<footer id="footerExplore" class="page-footer hide-on-small-and-down footerExploreElse">
  .........
</footer>

【讨论】：

这在两个cmets中已经提到了。使用 2k 代表，我认为您可以将其标记为错字类型删除
似乎代码可以正常工作，但现在我必须在性质选项卡上单击两次才能正常工作。