我有一个活动选项卡的自动播放选项卡类current，这意味着当该选项卡活动时，有一个名为current的类。现在我要向第一个子添加不同的类
null
$(document).ready(function(jQuery) {
if ($('li.stp-1').hasClass('current')) {
$('.li-animation').addClass('hover-1');
} else {
$('.li-animation').removeClass('hover-1');
}
if ($('li.stp-2').hasClass('current')) {
$('.li-animation').addClass('hover-2');
} else {
$('.li-animation').removeClass('hover-2');
}
});
$(document).ready(function(jQuery) {
$(function () {
var boxes = $(".HWBlock"),
tabs = $(".tablinks");
function showTabContent() {
return boxes.queue("tabs", $.map(boxes, function (el, curr) {
return function (next) {
boxes.hide() // hide `.box` elements
.add(tabs) // add `.tabs` to current selector
.removeClass("current") // remove `.current` class
.filter(el) // current `.box` element
.fadeIn(150) // fade in current `.box` element
.add(tabs.eq(curr)) // add `.tabs` at index `curr` to selector
.addClass("current") // add `current` `className` to selector
.end() // end current selection at `.boxes` selector
.delay(5000, "content") // set, delay `"content"` queue 5000ms
.dequeue("content") // dequeue `"content"` queue
.promise("content") // at completed promise of `"content"` queue
.then(next) // call next function in `"tabs"` queue
}
}))
.dequeue("tabs") // dequeue `"tabs"` queue
.promise("tabs") // at completed promise of `"tabs"` queue
.then(showTabContent); // call `showTabContent` recursively
}
showTabContent();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="d-md-flex wow fadeInDown">
<li class="li-animation"></li>
<li class="tablinks stp-1">stp-1</li>
<li class="tablinks stp-2">stp-2</li>
<li class="tablinks stp-3">stp-3</li>
</ul>
<div class="how-works-text wow fadeInUp">
<div class="HWBlock step-1" id="step-1">
<p>test</p>
</div>
<div class="HWBlock step-2" id="step-2">
<p>test 2</p>
</div>
<div class="HWBlock step-3" id="step-3">
<p>test 3</p>
</div>
</div>null
根据你在你的问题和评论中给我们的非常有限的信息，这里有一个关于什么可能起作用的绝对猜测。这完全是基于我对jQuery的效果队列功能的了解，这是有限的。
我还冒昧地使用toggleClass来减少代码的长度，在带有“li-animation”类的元素中添加或删除“hover-*”类。
null
function addHoverClasses() {
$('.li-animation').toggleClass('hover-1', $('li.stp-1').hasClass('current'));
$('.li-animation').toggleClass('hover-2', $('li.stp-2').hasClass('current'));
}
$(document).ready(function(jQuery) {
$(function () {
var boxes = $(".HWBlock"),
tabs = $(".tablinks");
function showTabContent() {
return boxes.queue("tabs", $.map(boxes, function (el, curr) {
return function (next) {
boxes.hide() // hide `.box` elements
.add(tabs) // add `.tabs` to current selector
.removeClass("current") // remove `.current` class
.filter(el) // current `.box` element
.fadeIn(150) // fade in current `.box` element
.add(tabs.eq(curr)) // add `.tabs` at index `curr` to selector
.addClass("current") // add `current` `className` to selector
.queue(function (next) {
addHoverClasses();
next();
})
.end() // end current selection at `.boxes` selector
.delay(5000, "content") // set, delay `"content"` queue 5000ms
.dequeue("content") // dequeue `"content"` queue
.promise("content") // at completed promise of `"content"` queue
.then(next) // call next function in `"tabs"` queue
}
}))
.dequeue("tabs") // dequeue `"tabs"` queue
.promise("tabs") // at completed promise of `"tabs"` queue
.then(showTabContent); // call `showTabContent` recursively
}
showTabContent();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="d-md-flex wow fadeInDown">
<li class="li-animation"></li>
<li class="tablinks stp-1">stp-1</li>
<li class="tablinks stp-2">stp-2</li>
<li class="tablinks stp-3">stp-3</li>
</ul>
<div class="how-works-text wow fadeInUp">
<div class="HWBlock step-1" id="step-1">
<p>test</p>
</div>
<div class="HWBlock step-2" id="step-2">
<p>test 2</p>
</div>
<div class="HWBlock step-3" id="step-3">
<p>test 3</p>
</div>
</div>