トップへ戻る
BLOGS

JS よく目にするタブUIを作ってみよう!!

JS よく目にするタブUIを作ってみよう!!

今回はjavascriptといえばというくらいよく目にしますよね。

タブUIを実装したいと思います。

クリックしたら背景色と同化し上部にまるでタブがあるかのように見えるからそう呼ばれているのだと確信しています。

今回もJSメインでいくのでまずは簡単にHTMLから、

 <ul class="tabs">
      <li><a href="" class="active">タブ1</a></li>
      <li><a href="">タブ2</a></li>
      <li><a href="">タブ3</a></li>
    </ul>
    <ul class="contents">
      <li class="active">コンテンツ1</li>
      <li>コンテンツ2</li>
      <li>コンテンツ3</li>
    </ul>

このように上のタブとコンテンツをリストにして用意しました。

また、最初からクラスactiveを振っておくことで最初の1つ目が最初は選択されているよううに見せています。

後はこれに同系色になるようにCSSをあてますがそこは今回は端折って早速JSを書いていこうと思います。

まずは双方をさわれるようにするため要素の取得からです。

const tabs = document.querySelectorAll(".tabs li a");
const contents = document.querySelectorAll(".contents li");

querySelectorAllを使用し要素を配列で取得してきました。

次はクリックしたら取得した要素にクラスをもたせるようにします。

tabs[1].addEventListener("click",function(event) {
    event.preventDefault();
    this.classList.add("active");
    contents[1].classList.add("active");
})

event.preventDefault();は対象のタグがaタグであるため画面リロードを防ぐためにfunctionの引数にしておきます。

取得した要素は配列で取得しているので配列の番号を[]の中に入れてあげればOKですが、

上記の記述を配列の個数分書かなきゃいけなくなりますし、配列が増えたりしたら大変面倒なので前回同様、

for文で配列をまとめて出力しようと思います。

for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener("click",function(event) {
    event.preventDefault();
    this.classList.add("active");
    contents[i].classList.add("active");
  })
}

これで[]にループで全ての配列の個数分の値が出力されるため、クリックされた要素にクラスが付与されそのクラスに指定したスタイルを当てることで要素が開いたように見せることが出来ます。

しかしこれではクラスが付与されっぱなしになるためタブが開きっぱなしになっています。

クリックされたら要素のクラスを削除するようにします。

for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener("click",function(event) {
    event.preventDefault();

    for (let j = 0; j < tabs.length; j++) {
      tabs[j].classList.remove("active");
    }
    for (let j = 0; j < contents.length; j++) {
      contents[j].classList.remove("active");
    }

    this.classList.add("active");
    contents[i].classList.add("active");
  })
}

クリックイベントにさらにfor文を記述し要素を削除します。

ポイントとなるのはlet jとすることで要素を追加するfor文に影響を与えないこと、

そして、処理の順番を考慮することで一度すべてのクラスを削除し、そのすぐさまクラスを追加する処理を行っていることです。

今回は以上です。お疲れさまでした。

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA