【发布时间】：2023-12-17 19:46:01
【问题描述】：
我试图在引导轮播中有 4 个不同的滑块，我有一些按钮，当有人点击一个按钮时，滑块应该根据我在 CSS 中的决定而改变，但我尝试过的代码不是工作，我给你链接了一个不工作的代码的最小版本，谢谢。
<style>
.c {
display: none;
}
.d {
display: none;
}
#a:checked~.c {
display: block !important;
}
#b:checked~.d {
display: block !important;
}
</style>
</head>
<body>
<input type="checkbox" id="a" class="check" checked>
<input type="checkbox" id="b" class="check">
<label for="a">a</label>
<label for="b">b</label>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner c" id="f1">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
a
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<div class="carousel-inner d" id="f2">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
-->
<script>
$(".check").click(function () {
$(".check").prop("checked", false);
$(this).prop("checked", true);
});
</script>
</body>
</html>
我首先从 BOOTSTRAP 获取轮播，然后创建另一个内部轮播，然后创建具有不同 id 但相同类的复选框。因为不要同时检查两者我正在使用 JQUERY 底部的类并检查它们是否没有同时检查。最后使用 CSS 我根据选中的复选框显示每个内部轮播，但不知何故它不起作用
【问题讨论】：
-
您应该触发
$("#carouselExampleIndicators").carousel(slidenumber);来更改幻灯片，而不是更改 CSS。使用输入单选而不是复选框。 developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio 。见*.com/questions/13152927/… -
@mr_joncollette，感谢它真正帮助我的答案，这就是我现在的做法，这是正确的方法吗？