我想一键切换标签

Question

我的问题是，当你按下TAB按钮时，它会显示单词profile，如果你再按下它，它应该会显示单词home

目前，当我点击Tab时，它会切换到配置文件，但当我再次单击Tab时，应该会切换到主页，但它不会切换。

const tab1 = document.querySelector('#tab11')
const tab2 = document.querySelector('#tab12')
const allTabPane = document.querySelectorAll('.tab-pane')
tab1.addEventListener('click', toggleTabs);
tab2.addEventListener('click', toggleTabs);
function clickTab(tab) {
if (tab.parentNode.classList.contains('active') === false) tab.click();
}
function toggleTabs(e) {
e.preventDefault();
if (this.parentNode.classList.contains('active')) {
let toClick = this.parentNode.parentNode.querySelector('li:not(.active) > a');
setTimeout(function() {
toClick.click();
}, 10);
}
}

.wrapper {
width: 50%;
border: solid #000 2px;
margin: 0 auto;
}
.tab-bg {
text-decoration: none;
font-size: 2rem;
}
.tab-pane {
padding: 50px;
color: blueviolet;
font-size: 1.5rem;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<div class="wrapper">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">
<a class="tab-bg" href="#" id="tab11" data-bs-toggle="tab" data-bs-target="#home-tab-pane" role="tab" aria-controls="home-tab-pane" aria-selected="true">TAB</a>
</li>
<li>
<a href="#" id="tab12" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" role="tab" aria-controls="profile-tab-pane" aria-selected="false"></a>
</li>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="home-tab-pane">Home</div>
<div class="tab-pane fade" id="profile-tab-pane">Profile</div>
</div>
</div>
</div>

Codepen演示。

Answer 1

工作代码

$('.tab-bg').on('click', function () {
$('.tab-bg').closest("li").toggleClass("active");
$(".tab-pane").toggleClass("active fade show");
});

.wrapper{
width: 50%;
border: solid #000 2px;
margin: 0 auto;

}
.tab-bg{
text-decoration: none;
font-size: 2rem;
}
.tab-pane{
padding: 50px;
color: blueviolet;
font-size: 1.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

<div class="wrapper">
<div class="panel-heading">

<ul class="nav nav-tabs">
<li class="active">
<a class="tab-bg" href="#" id="tab11" data-bs-toggle="tab" data-bs-target="#home-tab-pane" role="tab" aria-controls="home-tab-pane" aria-selected="true">TAB</a>
</li>
<li>
<a href="#" id="tab12" data-bs-toggle="tab" class="tab-bg"  data-bs-target="#profile-tab-pane" role="tab" aria-controls="profile-tab-pane" aria-selected="false"></a>
</li>

</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane  show active" id="home-tab-pane">Home</div>
<div class="tab-pane fade" id="profile-tab-pane">Profile</div>
</div>

</div>
</div>