Question

我有以下代码，它是用于旋转木马指示器我通过放置图像而不是默认指示器对其进行了一些更改，我如何选择数据-link-to =“0”到任何一个li并应用条件，例如，如果data-slide-to = 0使用jquery函数将导航栏背景颜色更改为红色？我在旋转木马上面有一个导航栏，我想要做的是选择指标的索引，当它变为活动状态时，它会改变导航栏背景颜色

<!-- Indicators -->
            <div class="controls">
                <ul class="nav list-unstyled list-inline">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active">
                        <a href="#"><img style="width: 100%" src=""></a>
                    </li>
                    <li data-target="#carousel-example-generic" data-slide-to="1">
                        <a href="#"><img style="width: 100%" src=""></a>
                    </li>
                    <li data-target="#carousel-example-generic" data-slide-to="2">
                        <a href="#"><img style="width: 100%" src=""></a>
                    </li>
                    <li data-target="#carousel-example-generic" data-slide-to="3">
                        <a href="#"><img style="width: 100%" src=""></a>
                    </li>
                    <li data-target="#carousel-example-generic" data-slide-to="4">
                        <a href="#"><img style="width: 100%" src=""></a>
                    </li>
                </ul>
            </div>

Answer 1

$('li[data-slide-to="0"]').css('background-color', 'red');

Answer 2

如果您只需要更改样式，可以使用纯CSS完成。

li[data-slide-to="0"] {
  background-color: red;
}

使用jquery选择索引

2 个答案: