Bootstrap手风琴-一次参加一堂活动课

问题描述 投票：0回答：1

我正在使用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>
javascript jquery html css bootstrap-4
1个回答
1
投票

单击一个类时，您可以从相关的超链接中删除类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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.