Jquery: 单键切换tab？

Question

我有两个选项卡，Tab-A 和 Tab-b，只要用户点击 Tab-A，它就会显示并激活 Tab-B，但当用户点击 Tab-A 时再次显示，而 Tab -b 处于活动状态，它必须显示 Tab-A 及其内容

Currently when I click on Tab-A it will switch to Tab-B but again when I click on Tab-A it has to switch to Tab-A but it's not switching.

// TAB Buttons
const tab1 = document.querySelector('#tab11')
const tab2 = document.querySelector('#tab12')

// TAB Content
const allTabPane = document.querySelectorAll('.tab-pane')

tab1.addEventListener('click', showSecondTab)

function showSecondTab(e) {
  e.preventDefault()
  inactiveAllTabPane()
  setTimeout(function() {
    tab2.click()
  }, 400)

}

function inactiveAllTabPane() {
  for (let i = 0; i < allTabPane.length; i++) {
    const element = allTabPane[i];
    element.classList.remove('active')
  }
}

.pg-content p {
  font-family: poppins;
  font-size: 14px;
  margin-bottom: 0px;
}

.acc-head {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: center;
}

.tab-accrd a {
  text-decoration: none;
  color: #000;
  font-family: poppins;
}

.tab-accrd a i {
  color: #FC453E;
}

.tab-accrd .card {
  background: #eee;
  border-bottom: 1px solid #FC453E;
  border-radius: 0px;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
}

.tab-accrd .card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, .03);
  border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.tab-accrd .card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.tab-accrd h5 {
  font-size: 20px;
}

.p-0 {
  padding: 0px;
}

.nav-tabs {
  border: none;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem!important;
}

.accordion-head i {
  float: right;
}

.accordion-head>.collapsed>i:before {
  content: "\f151";
}

html {
  scroll-behavior: smooth;
}

.tab-accrd span {
  font-size: 30px;
  font-weight: 600;
  color: #fc453e;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="col-lg-12 mt-5 tab-accrd">
  <div class="panel with-nav-tabs panel-default">
    <div class="panel-heading">
      <ul class="nav nav-tabs">
        <!-- define id for tabs tab11 and tab12 -->
        <li class="active"><a href="#tab3default" id="tab11" data-toggle="tab">Default 1</a></li>
        <li><a href="#tab4default" id="tab12" data-toggle="tab">Default 2</a></li>
      </ul>
    </div>
    <div class="panel-body">
      <div class="tab-content">
        <div class="tab-pane fade in active" id="tab3default">
          <div class="panel-group" id="faqAccordion">
            <div class="panel panel-default ">
              <div class="panel-heading accordion-toggle question-toggle collapsed" style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question5">
                <div class="d-flex" style="align-items:center;">
                  <span>1</span>
                  <h5 class="panel-title ml-3">
                    What is Lorem Ipsum?
                  </h5>
                </div>

              </div>
              <div id="question5" class="panel-collapse collapse" style="height: 0px;">
                <div class="panel-body" style="padding: 15px;
                            background: #eee;">
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown

                  </p>

                </div>
              </div>
            </div>
            <div class="panel panel-default ">
              <div class="panel-heading accordion-toggle collapsed question-toggle" style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question6">
                <div class="d-flex" style="align-items:center;">
                  <span>2</span>
                  <h5 class="panel-title ml-3">
                    What is Lorem Ipsum?
                  </h5>
                </div>

              </div>
              <div id="question6" class="panel-collapse collapse" style="height: 0px;">
                <div class="panel-body" style="padding: 15px;
                          background: #eee;">
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                  </p>

                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="tab-pane fade" id="tab4default">
          <div class="panel-group" id="faqAccordion">
            <div class="panel panel-default ">
              <div class="panel-heading accordion-toggle question-toggle " style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question9">
                <div class="d-flex" style="align-items:center;">
                  <span>1</span>
                  <h5 class="panel-title ml-3">
                    What is Lorem Ipsum?
                  </h5>
                </div>

              </div>
              <div id="question9" class="panel-collapse" style="height: 0px;">
                <div class="panel-body" style="padding: 15px;
                            background: #eee;">
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
                  </p>

                </div>
              </div>
            </div>
            <div class="panel panel-default ">
              <div class="panel-heading accordion-toggle collapsed question-toggle" style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question1">
                <div class="d-flex" style="align-items:center;">
                  <span>2</span>
                  <h5 class="panel-title ml-3">
                    What is Lorem Ipsum?
                  </h5>
                </div>

              </div>
              <div id="question1" class="panel-collapse" style="height: 0px;">
                <div class="panel-body" style="padding: 15px;
                          background: #eee;">
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                  </p>

                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

您可以检查是否需要单击，如果需要，请在 setTimeout

中的正确选项卡上执行单击

// TAB Buttons
const tab1 = document.querySelector('#tab11')
const tab2 = document.querySelector('#tab12')

// TAB Content
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();
      }, 40);
  }
}

.pg-content p {
  font-family: poppins;
  font-size: 14px;
  margin-bottom: 0px;
}

.acc-head {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: center;
}

.tab-accrd a {
  text-decoration: none;
  color: #000;
  font-family: poppins;
}

.tab-accrd a i {
  color: #FC453E;
}

.tab-accrd .card {
  background: #eee;
  border-bottom: 1px solid #FC453E;
  border-radius: 0px;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
}

.tab-accrd .card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, .03);
  border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.tab-accrd .card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.tab-accrd h5 {
  font-size: 20px;
}

.p-0 {
  padding: 0px;
}

.nav-tabs {
  border: none;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem!important;
}

.accordion-head i {
  float: right;
}

.accordion-head>.collapsed>i:before {
  content: "\f151";
}

html {
  scroll-behavior: smooth;
}

.tab-accrd span {
  font-size: 30px;
  font-weight: 600;
  color: #fc453e;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="col-lg-12 mt-5 tab-accrd">
  <div class="panel with-nav-tabs panel-default">
    <div class="panel-heading">
      <ul class="nav nav-tabs">
        <!-- define id for tabs tab11 and tab12 -->
        <li class="active"><a href="#tab3default" id="tab11" data-toggle="tab">Default 1</a></li>
        <li><a href="#tab4default" id="tab12" data-toggle="tab">Default 2</a></li>
      </ul>
    </div>
    <div class="panel-body">
      <div class="tab-content">
        <div class="tab-pane fade in active" id="tab3default">
          <div class="panel-group" id="faqAccordion">
            <div class="panel panel-default " onclick="tab1.click()">
              <div class="panel-heading accordion-toggle question-toggle collapsed" style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question5">
                <div class="d-flex" style="align-items:center;">
                  <span>1</span>
                  <h5 class="panel-title ml-3">
                    What is Lorem Ipsum?
                  </h5>
                </div>

              </div>
              <div id="question5" class="panel-collapse collapse" style="height: 0px;">
                <div class="panel-body" style="padding: 15px;
                            background: #eee;">
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown

                  </p>

                </div>
              </div>
            </div>
            <div class="panel panel-default " onclick="tab2.click()">
              <div class="panel-heading accordion-toggle collapsed question-toggle" style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question6">
                <div class="d-flex" style="align-items:center;">
                  <span>2</span>
                  <h5 class="panel-title ml-3">
                    What is Lorem Ipsum?
                  </h5>
                </div>

              </div>
              <div id="question6" class="panel-collapse collapse" style="height: 0px;">
                <div class="panel-body" style="padding: 15px;
                          background: #eee;">
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                  </p>

                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="tab-pane fade" id="tab4default">
          <div class="panel-group" id="faqAccordion">
            <div class="panel panel-default " onclick="tab1.click()">
              <div class="panel-heading accordion-toggle question-toggle " style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question9">
                <div class="d-flex" style="align-items:center;">
                  <span>1</span>
                  <h5 class="panel-title ml-3">
                    What is Lorem Ipsum?
                  </h5>
                </div>

              </div>
              <div id="question9" class="panel-collapse" style="height: 0px;">
                <div class="panel-body" style="padding: 15px;
                            background: #eee;">
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
                  </p>

                </div>
              </div>
            </div>
            <div class="panel panel-default " onclick="tab2.click()">
              <div class="panel-heading accordion-toggle collapsed question-toggle" style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question1">
                <div class="d-flex" style="align-items:center;">
                  <span>2</span>
                  <h5 class="panel-title ml-3">
                    What is Lorem Ipsum?
                  </h5>
                </div>

              </div>
              <div id="question1" class="panel-collapse" style="height: 0px;">
                <div class="panel-body" style="padding: 15px;
                          background: #eee;">
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                  </p>

                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

Jquery: 单键切换tab？

Jquery: Switch to tab by click on single button?

javascript

html

jquery