JavaScript タブ切り替えしたいが表示されない。

Question

某模写コーティングが終わったのですが、JavaScriptの記述に手こずっております。

-----困っていること----

❶タブの切り替えを実行したいのだが、クリックしても、色が切り替わらない。

❷該当タブと同じID番号のcontentsが表示されない。

現状、❶から分からない。

click対象の要素をどのように表現したらいいのかが分からない。

---実現させたいこと---
![

Comments

[yambejp]

タブとは「新着情報」「予約情報」「新店舗のお知らせ」のところですか？

[ah6BD2gZo5GnjnT]

さようでございます。

[kuma_kuma_]

ソースコードに個人情報とか丸写しです
模写でも変更するか消しておいてください。
あと実現させたいことの画像が小さすぎて判りません。

[ah6BD2gZo5GnjnT]

ご指摘ありがとうございます。

Answer 1

ちょっと調整してみたのですがcodesandboxの問題かもしれません
codesandbox上でチェックするとアンカーの制御を阻害するjsが走っているようです

Comments

[yambejp]

普通にやれば以下で行けると思います

document.querySelectorAll(".tab a").forEach(tab=>{
[tab,tab.closest('li')].forEach(x=>{
x.addEventListener("click", function (e) {
e.stopPropagation();
document.querySelector(".tab li.active").classList.remove("active");
x.closest('li').classList.add('active');
x.querySelector('a')?.click();
});
});
});

[ah6BD2gZo5GnjnT]

まだまだ自分の力でコードを書くことが厳しいのでもう少し基本を固めようと考えています。
ありがとうございました。

[yambejp]

今回の件、構造上の問題が１点あります。
.tabのaをli内に目一杯広げて、activeもaにつけるとかなりスッキリします

[ah6BD2gZo5GnjnT]

aタグをblock要素にする必要があるということでしょうか？
インライン要素ですと、確かに、不便かもしれません。

あと、質問なのですが、
x.closest('li').classList.add('active');
ここのxは、tab.aを表現しているという認識でよろしいのでしょうか？

[yambejp]

xがtabの中のliかaをさします。