使用带有活动类的 js 切换选项卡
[英]Switching tabs using js with active class
问题描述
当我选择当前选项卡的选项之一时，我想切换选项卡。 下一个选项卡内容进行切换，而不是选项卡本身。 我遵循了这个例子 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);
});
1 个解决方案
解决方案1
2 已采纳 2020-01-27 19:24:06
如果您只想在选择列表项之一时切换选项卡，您只需要弄清楚如何在兄弟姐妹之间切换 css 类。
我将以在年份选项卡和汽车品牌选项卡之间切换为例。
首先，您需要为将链接到侦听器的 li 项目分配一些类（在您的示例中为 year-option）。
<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 元素时，在大多数情况下，这将是因为添加和删除了某些类。 只需查找这些类并在其兄弟姐妹之间切换即可。
遇到JS的持续性问题，导航栏活动类未正确切换
[英]Caught on a persistent issue with JS, nav bar active class not switching properly
如何使用D3.js在Bootstrap中切换选项卡的活动/非活动状态？
[英]How to toggle active/inactive of tabs in Bootstrap using D3.js?
JavaScript (JS) 选项卡内的 ES6 选项卡，嵌套问题，活动 class 被删除
[英]JavaScript (JS) ES6 tabs within tabs, nesting issue, active class getting removed
使用javascript将HTML子项和父选项卡添加到活动类
[英]Adding HTML children and parent tabs to active class using javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.