提问人：user22039298 提问时间：6/8/2023 更新时间：6/8/2023 访问量：36
如果类具有活动类，则显示不同的元素
Show different element if the the class has the class active
问：
#Summary 我使用轮播作为导航。
<div class="swiper-slide state1 swiper-slide-active">STATE 1</div>
<div class="swiper-slide state2 ">STATE 2</div>
<p class="state1-content">state 1</p>
<p class="state2-content">state 2</p>
.state2-content {
display:none;
}
<script>
jQuery(".grad-nav .swiper-slide").addClass(function (i) {
return 'state' + (i + 1)
});
if (jQuery(".state1").hasClass("swiper-slide-active")) {
jQuery(".state1-content").fadeIn(300);
jQuery(".state2-content").fadeOut(300);
}
if (jQuery(".state2").hasClass("swiper-slide-active")) {
jQuery(".state2-content").fadeIn(300);
jQuery(".state1-content").fadeOut(300);
}
</script>
#Summary 请帮帮我。
如果类检测到它有活动类，我想显示其他元素。
答：
3赞
Developer Ali Usman
6/8/2023
#1
使用 if else 条件不是多个元素的通用方法。因此，这是在您的情况下运行良好的代码：
CSS的
<style>
.state2-content {
display:none;
}
</style>
[HTML全文]
<div class="swiper-slide state1 swiper-slide-active">STATE 1</div>
<div class="swiper-slide state2">STATE 2</div>
<p class="state1-content">state 1</p>
<p class="-content">state 2</p>
脚本
<script>
$(document).ready(function() {
$(".grad-nav .swiper-slide").addClass(function (index) {
return 'state' + (index + 1);
});
$(".grad-nav .swiper-slide").on('click', function() {
var activeState = $(this).attr('class').split(' ')[1];
$(".grad-nav .state-content").fadeOut(300);
$("." + activeState + "-content").fadeIn(300);
});
});
</script>
$(document).ready(function() {
$(".grad-nav .swiper-slide").addClass(function (index) {
return 'state' + (index + 1);
});
$(".grad-nav .swiper-slide").on('click', function() {
var activeState = $(this).attr('class').split(' ')[1];
$(".grad-nav .state-content").fadeOut(300);
$("." + activeState + "-content").fadeIn(300);
});
});.state2-content {
display:none;
}<div class="swiper-slide state1 swiper-slide-active">STATE 1</div>
<div class="swiper-slide state2">STATE 2</div>
<p class="state1-content">state 1</p>
<p class="state2-content">state 2</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
评论