英文:
Show different element if the the class has the class active
问题
Sure, here's the translated code:
#摘要
我正在使用走马灯作为导航。
<div class="swiper-slide state1 swiper-slide-active">状态 1</div>
<div class="swiper-slide state2 ">状态 2</div>
<p class="state1-content">状态 1</p>
<p class="state2-content">状态 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>
#摘要
请帮助我。
我想在检测到具有活动类的情况下显示其他元素。
Note: The code has been translated, and only the translated parts are included in the response.
英文:
#Summary
I'm using a carousel as a navigation.
<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
Please help me.
I would like to show other element if the class detects that it has class active.
答案1
得分: 3
使用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
<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>
英文:
Using if else condition is not a generic way for multiple elements.So, here is the code that works fine in your case:
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
<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>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(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);
});
});
<!-- language: lang-css -->
.state2-content {
display:none;
}
<!-- language: lang-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="state2-content">state 2</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论