当我选择当前选项卡的选项之一时，我想切换选项卡。下一个选项卡内容会进行切换，但不会切换选项卡本身。我按照这个例子 jsfiddle.net/ah97fo5m/进行操作。 但无法用我的代码来实现。我在这里做错了什么？
提前谢谢您。
这是代码 https://codepen.io/mahirq8/pen/RwNWdRp?editors=1010
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<div class="modal-body" id="tabs">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Year</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Make</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Model</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-vo-tab" data-toggle="pill" href="#pills-vo" role="tab" aria-controls="pills-vo" aria-selected="false">Version/Option</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" id="pills-location-tab" data-toggle="pill" href="#pills-location" role="tab" aria-controls="pills-location" aria-selected="false">Location</a>
</li> -->
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="d-flex justify-content-center">
<ul class="tire-selector">
<li><a data-toggle="pill" href="#pills-profile" class="list-group-item nexttab">2020</a></li>
<li><a data-toggle="pill" href="#pills-profile" class="list-group-item nexttab">2019</a></li>
<li><a data-toggle="pill" href="#pills-profile" class="list-group-item nexttab">2018</a></li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<div class="d-flex justify-content-center">
<ul class="tire-selector">
<li><a href="#" class="list-group-item">Acura</a></li>
<li><a href="#" class="list-group-item">Alfa</a></li>
<li><a href="#" class="list-group-item">Aston</a></li>
<li><a href="#" class="list-group-item">Audi</a></li>
<li><a href="#" class="list-group-item">BMW</a></li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<div class="d-flex justify-content-center">
<ul class="tire-selector">
<li><a href="#" class="list-group-item">Class-XL</a></li>
</ul>
<ul class="tire-selector">
<li><a href="#" class="list-group-item">Class-C</a></li>
</ul>
<ul class="tire-selector">
<li><a href="#" class="list-group-item">Class-B</a></li>
</ul>
<ul class="tire-selector">
<li><a href="#" class="list-group-item">Class-A</a></li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="pills-vo" role="tabpanel" aria-labelledby="pills-vo-tab">
<div class="d-flex justify-content-center">
<ul class="tire-selector">
<li><a href="#" class="list-group-item">Manual</a></li>
</ul>
<ul class="tire-selector">
<li><a href="#" class="list-group-item">Auto</a></li>
</ul>
</div>
</div>
<!-- <div class="tab-pane fade" id="pills-location" role="tabpanel" aria-labelledby="pills-location-tab">
<div class="d-flex justify-content-center">
<div class="form-inline">
<div class="input-group mx-3">
<input type="text" class="form-control" placeholder="Full Address or ZIP" aria-label="Full Address or ZIP" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-primary" type="button">Go</button>
</div>
</div>
<span>OR</span>
<button type="submit" class="btn btn-primary mx-3">Use Current Location</button>
</div>
</div>
</div> -->
</div>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
<button type="button" class="btn btn-primary a-none"> <a href="{% url 'search' %}">Save & Search</a></button>
</div>
$("#tabs").tabs();
$(".nexttab").click(function() {
$("#tabs").tabs("select", this.hash);
});
# OR
$("#tabs").tabs();
$(".nexttab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected + 1);
});
最佳答案
如果您只想在选择其中一个列表项时切换选项卡，则只需弄清楚如何在同级之间切换 css 类即可。
我将以在年份选项卡和汽车品牌选项卡之间切换为例。
首先，您需要为将链接到监听器的 li 项目分配一些类(示例中的年份选项)。
<ul class="tire-selector">
<li><a data-toggle="pill" href="#pills-profile" class="list-group-item year-option">2018</a></li>
<li><a data-toggle="pill" href="#pills-profile" class="list-group-item year-option">2019</a></li>
.......
.......
</ul>
JS
$(".year-option").click(function() {
// first remove the active class from all the nav-links
$('.nav-link').removeClass('active');
// then apply active class on the target nav-link's id
$('#pills-profile-tab').addClass('active')
// same with the list containers, here you need to switch two classes
$('tab-pane').removeClass('show active')
$('pills-profile').addClass('show active')
});
当涉及到在某些操作中显示和隐藏自身的 ui 元素时，在大多数情况下，这是因为添加和删除了某些类。只需查找这些类并在其兄弟类之间切换即可。
关于javascript - 使用带有 active 类的 js 切换选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59233418/