CSS HTML Javascript

タブの内容を切り替える

内容を切り替えるための処理として、まず全てのcontentからactiveクラスを削除します。

  • コンテンツからクラスを削除

コンテンツからクラスを削除

・前回まででメニューを切り替えることができたので今回はコンテンツを切り替えられるようにしていきましょう。

・やり方は簡単でコンテンツのactiveクラスを付け替えて上げればいいですね。

・まずはコンテンツを外す作業からしていきましょう。

・Javascriptの方でコンテンツの取得をしていきましょう。変数名をcontentsとしてあげてquerySelectorAllでクラス名を取得します。('.content’)ですね。

・ const contents = document.querySelectorAll('.content’);と書いていけばいいでしょう。

・次にクリックイベントでアクティブクラスを外してあげます。

・contentsにforEachを使ってそれぞれの要素をcontentとして受け取り、removeを使ってactiveクラスを外してあげます。

・こんな感じですね

      contents.forEach(content => {

        content.classList.remove('active');

-CSS, HTML, Javascript