Есть табы. Они работают, но если внутрь li добавить div и добавить в него текст, то табы перестают работать по клику на текст. Как это можно исправить и сделать так, чтобы табы работали не только по клику на li?
<div class=" tabs">
<div class="tabs__btns">
<li index="0" class="tabs__btn ">
<div class="adress>Text</div>
<a class="adress" href="javascript:void(0);">Text</a>
</li>
<li index="1" class="tabs__btn ">
<div class="adress">Text</div>
<a class="adress" href="javascript:void(0);">Text</a>
</li>
</div>
<ul class="tabs__container">
<li class="tabs__tab">КОНТЕНТ 0</li>
<li class="tabs__tab">КОНТЕНТ 1</li>
</ul>
</div>
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll(".tabs__container").forEach((item) => {
item.querySelectorAll(".tabs__tab")[0].style.display = "block";
});
const toggleTab = (e) => {
const parent = e.target.parentNode.parentNode;
parent.querySelectorAll(".tabs__container .tabs__tab").forEach((tab) => {
tab.style.display = "none";
});
parent.querySelectorAll(".tabs__container").forEach((tab) => {
tab.querySelectorAll(".tabs__tab")[
Number(e.target.getAttribute("index"))
].style.display = "block";
});
};
document.querySelectorAll(".tabs__btns .tabs__btn").forEach((item) => {
item.addEventListener(
"click",
(e) => {
toggleTab(e);
},
false
);
});
});