如何使用Jquery切换滑块中的活动选项卡

我有一个选项卡式滑块，用来更改活动选项卡的颜色。选项卡可以正常切换，但由于某些原因，我无法让它更改活动类。下面是HTML和JS

我知道我调用了一些不正确的东西，以使类在选项卡中切换，但我不确定它应该是什么

链接到演示站点：

HTML

<div class="home-hero container-fluid p-0">

<div id="heroCarousel" class="carousel slide carousel-fade" data-ride="carousel">
   <!-- <div class="background-overlay"></div> -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="container">
                <div class="background-overlay hidden"></div>
                <div class="row">
                    <div class="hero-inner-content offset-md-2 col-md-8">
                        <?php echo get_field('hero_section_one'); ?>
                    </div>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="container">
                <div class="background-overlay hidden"></div>
                <div class="row">
                    <div class="hero-inner-content offset-md-2 col-md-8">
                        <?php echo get_field('hero_section_two'); ?>
                    </div>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="container">
                <div class="background-overlay hidden"></div>
                <div class="row">
                    <div class="hero-inner-content offset-md-2 col-md-8">
                        <?php echo get_field('hero_section_three'); ?>
                    </div>
                </div>
            </div>
        </div>
    </div>


   <!-- <a class="carousel-control-prev" href="#heroCarousel" role="button" data-slide="prev">
        <i class="fal fa-long-arrow-alt-left"></i>
    </a>
    <a class="carousel-control-next" href="#heroCarousel" role="button" data-slide="next">
        <i class="fal fa-long-arrow-alt-right"></i>
    </a>-->
    <div class="slider-tabs">
        <div data-target="#heroCarousel" class="click-nav tab slick-slide active" data-slide-to="0"><span>Support Aware® & Service Desk</span></div>
        <div data-target="#heroCarousel" class="click-nav tab slick-slide" data-slide-to="1"><span>Cybersecurity Solutions</span></div>
        <div data-target="#heroCarousel" class="click-nav tab slick-slide" data-slide-to="2"><span>Training Courses</span></div>
    </div>
</div>
<ul class="slick-dots">
    <li class="click-nav slick-active">
        <button type="button" id="slick-slide-control00" data-target="#heroCarousel" data-slide-to="0" class="active">1</button>
    </li>
    <li class="click-nav">
        <button type="button" id="slick-slide-control01" data-target="#heroCarousel" data-slide-to="1">2</button>
    </li>
    <li class="click-nav">
        <button type="button" id="slick-slide-control02" data-target="#heroCarousel" data-slide-to="2">3</button>
    </li>

</ul>

可能是因为“

.carousel指示符

”未定义，所以bs无法找到它

您是否可以通过将“

.carousel indicators

”添加到类为“

.slider tabs

”的

元素中重试？新添加的类可能会有一些变化，但我们可以编写一些额外的代码来稍后重写

<div class="slider-tabs carousel-indicators">

看起来您也在使用引导转盘之外的滑动条

在同一旋转木马中使用这两个类可能会导致冲突。 如果添加上述类失败，您可以尝试删除“

。单击导航

”和“

。滑动滑动

”类

---

如果问题没有解决，我们可以开始思考不同的事情！非常感谢

<div class="slider-tabs carousel-indicators">