Jquery：通过单击单个按钮切换到选项卡？

Question

I have two Tabs, Tab-A and Tab-b, whenever user click on Tab-A it will show and activate Tab-B but again when user click on Tab-A, while Tab-b is active it has to show Tab-A and it' content

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 ai { 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

You can check whether a click is needed and if so, perform the click on the correct tab inside a 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 ai { 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>