Question

我遇到了jQuery的问题。当我点击一个标签（一个标签）时，它会得到一个＆＃34;活跃的＆＃34;类。我想查看jQuery或javascript，哪个选项卡处于活动状态，以及当特定选项卡获取＆＃34;活动＆＃34; class，我想添加和删除类。

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

似乎代码正常运行，但现在的问题是我必须在自然选项卡上单击两次。

但出于某种原因，上面提供的代码并不起作用。另外，最好是直接调用ID和类，还是将它们存储在变量中并将它们用作var？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

.footerExploreNature {
  color: green;
}

.footerExploreElse {
  color: red;
}

.test {
  color: black;
}

＆＃13;

<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>

＆＃13;

jQuery选项卡检查类是不是要检查类

1 个答案: