代码之家 › 专栏 › 技术社区 › HovSky

jQuery选项卡检查类未检查类

materialize material-design html jquery javascript

HovSky · 技术社区 · 6 年前

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

1 回复 | 直到 6 年前

Scath Adam Robinson 6 年前

您没有正确引用元素 ('#footerExplore') 应该是 $('#footerExplore') 为chow颜色更改添加了测试类。

$("#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>