javascript - Bootstrap Accordion - 一次一个活跃的班级
问题描述
我正在使用 Bootstrap 的手风琴,我有两个不同的部分,有自己的内容。当我打开页面时,活动类位于第一部分的第一个元素。但是当我转到“第二”部分并单击其中一个列表项时,活动类仍然停留在“第一”部分。- 我想要的是:只有一个活跃的班级
.perNe2-section {
padding-top: 0;
}
.perNe2-section .content-wrapper {
margin-bottom: 30px;
}
.perNe2-section .content-wrapper .title {
font-size: 20px;
margin-bottom: 20px;
}
.perNe2-section .per-ne:last-child {
margin-bottom: 30px;
}
.perNe2-section .per-ne .nav-header {
color: #fff;
font-size: 15px;
background: #2c4969;
font-weight: bold;
padding: 0.5rem 1rem;
}
.perNe2-section .per-ne .nav-header .cursor-pointer {
cursor: pointer;
padding-right: 70px;
}
.perNe2-section .per-ne .nav-header i.fa-caret-down {
line-height: 1.5;
float: right;
}
.perNe2-section .per-ne .nav {
background: #fff;
flex-direction: column;
}
.perNe2-section .per-ne .nav-tabs {
color: red;
border-bottom: none;
}
.perNe2-section .per-ne .nav-tabs a {
color: green;
}
.perNe2-section .per-ne .nav-tabs .names {
display: block;
padding: 0.5rem 1rem;
}
.perNe2-section .per-ne .nav-tabs .names:hover {
text-decoration: none;
}
.perNe2-section .per-ne .nav-tabs .names.active {
color: green;
background: #edeef0;
border: none;
border-radius: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section class="perNe2-section">
<div class="container">
<div class="row">
<div class="col-lg-9">
<div class="tab-content">
<div class="tab-pane fade show active" id="perNe" role="tabpanel" aria-labelledby="perNe-tab">
<div class="content-wrapper">
<h2 class="title">Name</h2>
<p class="paragraph">Lorem Ipsum</p>
</div>
</div>
<div class="tab-pane fade" id="zv_kryesuesi" role="tabpanel" aria-labelledby="zv_kryesuesi-tab">
<div class="content-wrapper">
<h2 class="title">Zv_Kryesuesi</h2>
<p class="paragraph"></p>
</div>
</div>
<div class="tab-pane fade" id="ishKryesuesit" role="tabpanel" aria-labelledby="ishKryesuesit-tab">
<div class="content-wrapper">
<h2 class="title">IshKryesuesit</h2>
<p class="paragraph"></p>
</div>
</div>
<div class="tab-pane fade" id="aleksanderLumezi" role="tabpanel" aria-labelledby="aleksanderLumezi-tab">
<div class="content-wrapper">
<h2 class="title">AleksanderLumezi</h2>
<p class="paragraph"></p>
</div>
</div>
<div class="tab-pane fade" id="arbenIsmajli" role="tabpanel" aria-labelledby="arbenIsmajli-tab">
<div class="content-wrapper">
<h2 class="title">ArbenIsmajli</h2>
<p class="paragraph"></p>
</div>
</div>
<div class="tab-pane fade" id="bedrijeAlshiqi" role="tabpanel" aria-labelledby="bedrijeAlshiqi-tab">
<div class="content-wrapper">
<h2 class="title">BedrijeAlshiqi</h2>
<p class="paragraph"></p>
</div>
</div>
</div>
</div>
<!-- PER NE -->
<div class="col-lg-3">
<div class="accordion" id="working_accordion">
<div class="per-ne">
<div class="nav-header" id="headingOne">
<a class="cursor-pointer" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">FIRST<i class="fas fa-caret-down"></i></a>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#working_accordion">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li><a class="names active" id="perNe-tab" data-toggle="tab" href="#perNe" role="tab" aria-selected="false">
Per ne
</a></li>
<li><a class="names" id="zv_kryesuesi-tab" data-toggle="tab" href="#zv_kryesuesi" role="tab" aria-selected="false">
Zv. Kryesuesi
</a></li>
<li><a class="names" id="ishKryesuesit-tab" data-toggle="tab" href="#ishKryesuesit" role="tab" aria-selected="false">
Ish Kryesuesit
</a></li>
</ul>
</div>
</div> <!-- per ne -->
<div class="per-ne">
<div class="nav-header" id="headingTwo">
<a class="cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">SECOND<i class="fas fa-caret-down"></i></a>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#working_accordion">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li><a class="names" id="aleksanderLumezi-tab" data-toggle="tab" href="#aleksanderLumezi" role="tab" aria-selected="true">
Aleksander Lumezi
</a></li>
<li><a class="names" id="arbenIsmajli-tab" data-toggle="tab" href="#arbenIsmajli" role="tab" aria-selected="false">
Arben Ismajli
</a></li>
<li><a class="names" id="bedrijeAlshiqi-tab" data-toggle="tab" href="#bedrijeAlshiqi" role="tab" aria-selected="false">
Bedrije Alshiqi
</a></li>
</ul>
</div>
</div> <!-- per ne 2 -->
</div> <!-- accordion -->
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
解决方案
active
单击一个时,您可以从相关超链接中删除类。
$(".nav.nav-tabs li a").on("click", function() {
$(".nav.nav-tabs li a").removeClass("active");
});
.perNe2-section {
padding-top: 0;
}
.perNe2-section .content-wrapper {
margin-bottom: 30px;
}
.perNe2-section .content-wrapper .title {
font-size: 20px;
margin-bottom: 20px;
}
.perNe2-section .per-ne:last-child {
margin-bottom: 30px;
}
.perNe2-section .per-ne .nav-header {
color: #fff;
font-size: 15px;
background: #2c4969;
font-weight: bold;
padding: 0.5rem 1rem;
}
.perNe2-section .per-ne .nav-header .cursor-pointer {
cursor: pointer;
padding-right: 70px;
}
.perNe2-section .per-ne .nav-header i.fa-caret-down {
line-height: 1.5;
float: right;
}
.perNe2-section .per-ne .nav {
background: #fff;
flex-direction: column;
}
.perNe2-section .per-ne .nav-tabs {
color: red;
border-bottom: none;
}
.perNe2-section .per-ne .nav-tabs a {
color: green;
}
.perNe2-section .per-ne .nav-tabs .names {
display: block;
padding: 0.5rem 1rem;
}
.perNe2-section .per-ne .nav-tabs .names:hover {
text-decoration: none;
}
.perNe2-section .per-ne .nav-tabs .names.active {
color: green;
background: #edeef0;
border: none;
border-radius: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section class="perNe2-section">
<div class="container">
<div class="row">
<div class="col-lg-9">
<div class="tab-content">
<div class="tab-pane fade show active" id="perNe" role="tabpanel" aria-labelledby="perNe-tab">
<div class="content-wrapper">
<h2 class="title">Name</h2>
<p class="paragraph">Lorem Ipsum</p>
</div>
</div>
<div class="tab-pane fade" id="zv_kryesuesi" role="tabpanel" aria-labelledby="zv_kryesuesi-tab">
<div class="content-wrapper">
<h2 class="title">Zv_Kryesuesi</h2>
<p class="paragraph"></p>
</div>
</div>
<div class="tab-pane fade" id="ishKryesuesit" role="tabpanel" aria-labelledby="ishKryesuesit-tab">
<div class="content-wrapper">
<h2 class="title">IshKryesuesit</h2>
<p class="paragraph"></p>
</div>
</div>
<div class="tab-pane fade" id="aleksanderLumezi" role="tabpanel" aria-labelledby="aleksanderLumezi-tab">
<div class="content-wrapper">
<h2 class="title">AleksanderLumezi</h2>
<p class="paragraph"></p>
</div>
</div>
<div class="tab-pane fade" id="arbenIsmajli" role="tabpanel" aria-labelledby="arbenIsmajli-tab">
<div class="content-wrapper">
<h2 class="title">ArbenIsmajli</h2>
<p class="paragraph"></p>
</div>
</div>
<div class="tab-pane fade" id="bedrijeAlshiqi" role="tabpanel" aria-labelledby="bedrijeAlshiqi-tab">
<div class="content-wrapper">
<h2 class="title">BedrijeAlshiqi</h2>
<p class="paragraph"></p>
</div>
</div>
</div>
</div>
<!-- PER NE -->
<div class="col-lg-3">
<div class="accordion" id="working_accordion">
<div class="per-ne">
<div class="nav-header" id="headingOne">
<a class="cursor-pointer" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">FIRST<i class="fas fa-caret-down"></i></a>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#working_accordion">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li><a class="names active" id="perNe-tab" data-toggle="tab" href="#perNe" role="tab" aria-selected="false">
Per ne
</a></li>
<li><a class="names" id="zv_kryesuesi-tab" data-toggle="tab" href="#zv_kryesuesi" role="tab" aria-selected="false">
Zv. Kryesuesi
</a></li>
<li><a class="names" id="ishKryesuesit-tab" data-toggle="tab" href="#ishKryesuesit" role="tab" aria-selected="false">
Ish Kryesuesit
</a></li>
</ul>
</div>
</div>
<!-- per ne -->
<div class="per-ne">
<div class="nav-header" id="headingTwo">
<a class="cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">SECOND<i class="fas fa-caret-down"></i></a>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#working_accordion">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li><a class="names" id="aleksanderLumezi-tab" data-toggle="tab" href="#aleksanderLumezi" role="tab" aria-selected="true">
Aleksander Lumezi
</a></li>
<li><a class="names" id="arbenIsmajli-tab" data-toggle="tab" href="#arbenIsmajli" role="tab" aria-selected="false">
Arben Ismajli
</a></li>
<li><a class="names" id="bedrijeAlshiqi-tab" data-toggle="tab" href="#bedrijeAlshiqi" role="tab" aria-selected="false">
Bedrije Alshiqi
</a></li>
</ul>
</div>
</div>
<!-- per ne 2 -->
</div>
<!-- accordion -->
</div>
</div>
</div>
</section>
推荐阅读
- python - 将屏幕截图添加到从机器人框架到 Azure Pipelines 测试选项卡的 XUNIT 测试结果
- javascript - 如果分数是 0.6(不是 0.5)或更大,我如何四舍五入?
- python - 用熊猫中的 80% 替换超过 80% 的值
- html - 如何更改 Laravel 中的图标?
- security - 微服务架构中具有 userId 字段的数据库组织
- flutter - WidgetsBindingObserver 是否适用于无状态小部件?
- c++ - 如何在 C++ 中将数字拆分为数字
- javascript - 如何欺骗反应路由器认为`/`是挂载目录?
- python - 如何在 Ray 中使用全局变量
- java - 数据未更改时如何从 Firebase 检索数据