使用带有活动类的 js 切换选项卡
[英] Switching tabs using js with active class
本文介绍了使用带有活动类的 js 切换选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我选择当前选项卡的选项之一时，我想切换选项卡.下一个选项卡内容进行切换，而不是选项卡本身.我遵循了这个例子 jsfiddle.net/ah97fo5m/.但不能用我的代码实现.我在这里做错了什么?
提前致谢.
这是代码https://codepen.io/mahirq8/pen/RwNWdRp?editors=1010
<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><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 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 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">模型<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">版本/选项</a><!-- <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">位置--><div class="tab-content" id="pills-tabContent"><div class="tab-pane 淡出显示活动" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"><div class="d-flex justify-content-center"><ul class="轮胎选择器"><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>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"><div class="d-flex justify-content-center"><ul class="轮胎选择器"><li><a href="#" class="list-group-item">讴歌</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">奥迪</a></li><li><a href="#" class="list-group-item">BMW</a></li>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"><div class="d-flex justify-content-center"><ul class="轮胎选择器"><li><a href="#" class="list-group-item">Class-XL</a></li><ul class="轮胎选择器"><li><a href="#" class="list-group-item">Class-C</a></li><ul class="轮胎选择器"><li><a href="#" class="list-group-item">Class-B</a></li><ul class="轮胎选择器"><li><a href="#" class="list-group-item">Class-A</a></li>
<div class="tab-pane fade" id="pills-vo" role="tabpanel" aria-labelledby="pills-vo-tab"><div class="d-flex justify-content-center"><ul class="轮胎选择器"><li><a href="#" class="list-group-item">手册</a></li><ul class="轮胎选择器"><li><a href="#" class="list-group-item">Auto</a></li>
<!-- <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="完整地址或ZIP" aria-label="完整地址或ZIP" aria-scribedby="basic-addon2"><div class="input-group-append"><button class="btn btn-outline-primary" type="button">Go</button>
<span>OR</span><button type="submit" class="btn btn-primary mx-3">使用当前位置</button>
-->
<div class="modal-footer"><!-- <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>--><button type="button" class="btn btn-primary a-none"><a href="{% url 'search' %}">保存&搜索</a></button>
$("#tabs").tabs();$(".nexttab").click(function() {$("#tabs").tabs("select", this.hash);});# 或者$("#tabs").tabs();$(".nexttab").click(function() {var selected = $("#tabs").tabs("option", "selected");$("#tabs").tabs("option", "selected", selected + 1);});
解决方案
如果您只想在选择列表项之一时切换选项卡，您只需要弄清楚如何在两个选项之间切换 css 类兄弟姐妹.
我以在年份标签和汽车品牌标签之间切换为例.
首先，您需要为将链接到侦听器的 li 项分配一些类(在您的示例中为 year-option).
<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>............
JS
$(".year-option").click(function() {//首先从所有导航链接中删除活动类$('.nav-link').removeClass('active');//然后在目标导航链接的 id 上应用活动类$('#pills-profile-tab').addClass('active')//和列表容器一样，这里需要切换两个类$('tab-pane').removeClass('show active')$('pills-profile').addClass('show active')});
当涉及到在某些操作中显示和隐藏自身的 ui 元素时，在大多数情况下，这将是因为添加和删除了某些类.只需查找这些类并在其兄弟姐妹之间切换即可.
I want to switch tabs when I select one of the options of the current tab. The next tab content does the switch but not the tab itself. I've followed this example jsfiddle.net/ah97fo5m/.
But cant kind of implement with my code. What am I doing wrong here?
Thank you in advance.
Here's the code
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);
});
解决方案
If all you want to do is to switch the tab when one of the list item is selected, you need to just figure how to switch the css classes between the siblings.
I will take the example of switching between the year tab and the car brand tab.
First you need to assign some class(year-option in your example) to the li items which will be linked to a listener.
<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')
});
When it comes to ui elements that shows and hides itself on some action, in most of the cases it will be because of some class(es) being added and removed. Just look for those classes and switch it between it's siblings.
这篇关于使用带有活动类的 js 切换选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
