#javascript #html #css
#язык JavaScript #HTML #CSS
Вопрос:
Я пытаюсь управлять разными наборами вкладок отдельно, но это работает неправильно. Вкладки 1, 2 и 3 относятся к первому набору вкладок, тогда как вкладки A, B и C относятся ко второму набору вкладок. Вкладки 1 и A должны открываться по умолчанию при загрузке страницы.
Какие необходимые изменения необходимо внести для достижения этой цели?
lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt; lt;stylegt; .tab1 button.active { background-color: #03a1fc; } .tab2 button.active { background-color: #03a1fc; } .tabcontent { display: none; } lt;/stylegt; lt;/headgt; lt;bodygt; lt;div class = "tab1"gt; lt;button class = "tablinks" id="defaultOpen1" onclick="openTab1(event, 't11')"gt;1lt;/buttongt; lt;button class = "tablinks" onclick="openTab1(event, 't12')"gt;2lt;/buttongt; lt;button class = "tablinks" onclick="openTab1(event, 't13')"gt;3lt;/buttongt; lt;/divgt; lt;div id="t11" class="tabcontent"gt; lt;pgt;tab 1lt;/pgt; lt;/divgt; lt;div id="t12" class="tabcontent"gt; lt;pgt;tab 2lt;/pgt; lt;/divgt; lt;div id="t13" class="tabcontent"gt; lt;pgt;tab 3lt;/pgt; lt;/divgt; lt;brgt;lt;brgt;lt;brgt; lt;div class = "tab2"gt; lt;button class = "tablinks" id="defaultOpen2" onclick="openTab2(event, 'tA')"gt;Alt;/buttongt; lt;button class = "tablinks" onclick="openTab2(event, 'tB')"gt;Blt;/buttongt; lt;button class = "tablinks" onclick="openTab2(event, 'tC')"gt;Clt;/buttongt; lt;/divgt; lt;div id="tA" class="tabcontent"gt; lt;pgt;tab Alt;/pgt; lt;/divgt; lt;div id="tB" class="tabcontent"gt; lt;pgt;tab Blt;/pgt; lt;/divgt; lt;div id="tC" class="tabcontent"gt; lt;pgt;tab Clt;/pgt; lt;/divgt; lt;scriptgt; function openTab1(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i lt; tabcontent.length; i ) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i lt; tablinks.length; i ) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className = " active"; } function openTab2(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i lt; tabcontent.length; i ) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i lt; tablinks.length; i ) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className = " active"; } document.getElementById("defaultOpen1").click(); document.getElementById("defaultOpen2").click(); lt;/scriptgt; lt;/bodygt; lt;/htmlgt; Комментарии:
1. вместо того, чтобы нажимать на обе вкладки defaut, используйте классы defaut справа от тега, который должен открыться, и стилизуйте его из css. активный для вкладки и tabcontent defaut (или иначе) на тот, который будет показан. затем, когда вы нажмете, он ищет любой класс tabcontent, поэтому при первом щелчке будет отображаться только один левый. Вы можете использовать селекторы запросов для поиска класса только за одним div с именем класса, начинающимся с tab … таким образом, будут скрыты только следующие вкладки, а выбранная будет показана. Кроме того, будет проще добавить/удалить класс в классе tabcontent, чем добавить/удалить стиль 😉
2. @G-Сириллус, я полностью согласен с тобой. Это сократит код и сделает его чище.
Ответ №1:
такая возможность…
document.querySelectorAll('button.tablinks').forEach(bt =gt; { bt.onclick = e =gt; { let btGroup = bt.closest('div') btGroup.querySelectorAll('button.tablinks').forEach( gBt =gt; gBt.classList.toggle('active', gBt===bt)) btGroup.querySelectorAll('div.tabcontent').forEach( gDv =gt; gDv.classList.toggle('open', gDv.id===bt.dataset.tab)) } }) button.active { background-color: #03a1fc; } .tabcontent { display: none; } .tabcontent.open { display: block; } lt;divgt; lt;button class="tablinks active" data-tab="t11"gt;1lt;/buttongt; lt;button class="tablinks" data-tab="t12"gt;2lt;/buttongt; lt;button class="tablinks" data-tab="t13"gt;3lt;/buttongt; lt;div id="t11" class="tabcontent open"gt; lt;pgt;tab 1lt;/pgt; lt;/divgt; lt;div id="t12" class="tabcontent"gt; lt;pgt;tab 2lt;/pgt; lt;/divgt; lt;div id="t13" class="tabcontent"gt; lt;pgt;tab 3lt;/pgt; lt;/divgt; lt;/divgt; lt;divgt; lt;button class="tablinks active" data-tab="t21"gt;Alt;/buttongt; lt;button class="tablinks" data-tab="t22"gt;Blt;/buttongt; lt;button class="tablinks" data-tab="t23"gt;Clt;/buttongt; lt;div id="t21" class="tabcontent open"gt; lt;pgt;tab Alt;/pgt; lt;/divgt; lt;div id="t22" class="tabcontent"gt; lt;pgt;tab Blt;/pgt; lt;/divgt; lt;div id="t23" class="tabcontent"gt; lt;pgt;tab Clt;/pgt; lt;/divgt; lt;/divgt; Комментарии:
1. Да. Мне это нравится. является хорошей альтернативой
2. Большое спасибо! Он работает идеально.
Ответ №2:
Ваша программная структура должна быть несколько адаптирована для этой цели. Лучше всего работать с двумя разными селекторами вкладок. Я переименовал первые селекторные табличные ссылки в табличные ссылки 1. Таким образом, отображаются оба варианта.
function openTab1(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent1"); for (i = 0; i lt; tabcontent.length; i ) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i lt; tablinks.length; i ) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className = " active"; } function openTab2(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i lt; tabcontent.length; i ) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i lt; tablinks.length; i ) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className = " active"; } function init() { } document.getElementById("defaultOpen1").click(); document.getElementById("defaultOpen2").click(); .tab1 button.active { background-color: #03a1fc; } .tab2 button.active { background-color: #03a1fc; } .tabcontent, .tabcontent1 { display: none; } lt;div class = "tab1"gt; lt;button class = "tablinks" id="defaultOpen1" onclick="openTab1(event, 't11')"gt;1lt;/buttongt; lt;button class = "tablinks" onclick="openTab1(event, 't12')"gt;2lt;/buttongt; lt;button class = "tablinks" onclick="openTab1(event, 't13')"gt;3lt;/buttongt; lt;/divgt; lt;div id="t11" class="tabcontent1"gt; lt;pgt;tab 1lt;/pgt; lt;/divgt; lt;div id="t12" class="tabcontent1"gt; lt;pgt;tab 2lt;/pgt; lt;/divgt; lt;div id="t13" class="tabcontent1"gt; lt;pgt;tab 3lt;/pgt; lt;/divgt; lt;brgt;lt;brgt;lt;brgt; lt;div class = "tab2"gt; lt;button class = "tablinks" id="defaultOpen2" onclick="openTab2(event, 'tA')"gt;Alt;/buttongt; lt;button class = "tablinks" onclick="openTab2(event, 'tB')"gt;Blt;/buttongt; lt;button class = "tablinks" onclick="openTab2(event, 'tC')"gt;Clt;/buttongt; lt;/divgt; lt;div id="tA" class="tabcontent"gt; lt;pgt;tab Alt;/pgt; lt;/divgt; lt;div id="tB" class="tabcontent"gt; lt;pgt;tab Blt;/pgt; lt;/divgt; lt;div id="tC" class="tabcontent"gt; lt;pgt;tab Clt;/pgt; lt;/divgt;