[英]Setting javascript tabs
Good day.再会。 I write tabs on javascript.
我在 javascript 上写标签。 The idea behind these tabs is soundly common, but there is a slight difference from the standard ones.
这些标签背后的想法非常普遍,但与标准标签略有不同。 When I click on the "+" button, all tabs should be closed and only the one that was clicked should open.
当我点击“+”按钮时,所有选项卡都应该关闭,只有被点击的选项卡应该打开。 Everything works well, but I just can not implement the closing of the tab on the second click of the button
一切正常,但我无法在第二次单击按钮时实现选项卡的关闭
HTML HTML
<div class="faq__tab">
<div class="faq__tab__question">
Какие вложения необходимы для того, чтобы<br>
начать торговать на Wildberries?
<div class="faq__tab__qeustion-btn" data-tab='0'></div>
</div>
<div class="faq__tab__answer">
<span class="tab-answer">
Какие вложения необходимы для того, чтобы<br>
начать торговать на Wildberries?
</span>
</div>
</div>
JS JS
const tabButtons = document.querySelectorAll('.faq__tab__qeustion-btn');
const tabAnswers = document.querySelectorAll('.faq__tab__answer');
const answer = document.querySelectorAll('tab-answer');
let tabClicked = false;
tabButtons.forEach((btn, index) => {
btn.addEventListener('click', selectTab)
})
function selectTab() {
tabButtons.forEach(button => {
button.classList.remove('faq__tab__qeustion-btn--active');
});
tabAnswers.forEach(answer => {
answer.classList.remove('faq__tab__answer--active');
})
this.classList.add('faq__tab__qeustion-btn--active');
tabAnswers[this.getAttribute('data-tab')].classList.add('faq__tab__answer--active');
}
Save the original state of the tab in a variable, then toggle the opposite of the original state on the clicked tab after closing all.将选项卡的原始状态保存在一个变量中,然后在全部关闭后在单击的选项卡上切换与原始状态相反的状态。
tabButtons.forEach((btn) => {
btn.addEventListener('click', selectTab)
});
function selectTab() {
const tab = tabAnswers[this.dataset.tab];
const makeThisActive = !tab.classList.contains('faq__tab__answer--active');
tabButtons.forEach(button => {
button.classList.remove('faq__tab__qeustion-btn--active');
});
tabAnswers.forEach(answer => {
answer.classList.remove('faq__tab__answer--active');
})
this.classList.toggle('faq__tab__qeustion-btn--active', makeThisActive);
tab.classList.toggle('faq__tab__answer--active', makeThisActive);
}
I'd also recommend fixing the qeustion
- looks like a typo, and typos are frequent causes of bugs in programming.我也建议固定
qeustion
-看起来像一个错字,和错别字是编程错误的常见原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.