質問: ### 前提・実現したいこと 現在、情報系のサイトを作成しております。 サイト内にjavascriptを使って2つのタブ(タブ1、タブ2)を作成しました。 ここからが本題で、以下のような動作を実現したいと考えております。 1タブ1(背景:水色)の中身が開いている状態で、タブ2の背景が白の状態。 2タブ2をクリックした時、タブ2の背景がピンクに切り替わり、タブ1の背景が水色から白に切り替わる。 ※ポカリスエット公式サイトのようなタブをイメージしていただければわかりやすいかと思います。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/95c8175db405453ebb26568ca00f94fe.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/a5c5ccd869e8119532e221238316e77d.png) ### コード ``` ``` ``` ``` ``` タブサンプル タブサンプル タブ1 タブ2 タブ1の中身■CSS3:テスト1テスト2テスト3テスト4テスト5 タブ2の中身■JavaScript:テスト6テスト7テスト8テスト9テスト10 ``` ### 補足情報(FW/ツールのバージョンなど) sublimeで、動作がするかどうか試しています。 プログラミングは初心者なので、色々なサイトを参考にコードを書いてます。 ### 発生している問題 実現したい内容について、そもそもjsを使えばいいのか、cssを使えばいいのかがわかりません。 他社のサイトも色々調べたりしたのですが、近しい情報がございませんでした。 どのコードを使って、どのように記述すれば動作するのかご教授お願いします。
回答: > > そもそもjsを使えばいいのか、cssを使えばいいのかがわかりません。 > > > CSSのみで作ることも出来ますが、JavaScriptと組み合わせて使うのが簡単かと思います。 組み方にもよりますが、 1. `id`に頼った記述をしない(複数設置する時に記述量が増える) 2. JavaScriptで直接スタイルを変更するよりも、「選択された時」のクラスをCSSで用意しておくほうがコードが整理しやすい と思います。 下記は適当に作ったので雑ですが、複数設置可能なタブ切り替えの例です。 ``` タブ1 タブ2 タブ1の中身■CSS3:テスト1テスト2テスト3テスト4テスト5 タブ2の中身■JavaScript:テスト6テスト7テスト8テスト9テスト10 ``` ``` .tab-wrap { margin-bottom: 2em; } /* ▼タブ */ .tab-control > button { border: 0 none; border-radius: 0.75em 0.75em 0 0; padding: 0.75em 3.5em; font-weight: bold; background-color: #FFCCFF; } .tab-control > button.active { background-color: #BBFFFF; } /* ▼タブ */ .tab-contents > .tab { height: 0; overflow: hidden; } .tab-contents > .tab.active { height: auto; } .tab-contents > .tab > .tab-inner { padding: 1em; } ``` ``` document.addEventListener( 'DOMContentLoaded' , function( e ) { document.querySelectorAll( '.tab-wrap' ).forEach( function( tabs ) { tabs.querySelectorAll( '.tab-control > button' ).forEach( function( bt, i ) { bt.addEventListener( 'click', function( e ) { removeTabActive( tabs ); bt.classList.add( 'active' ); tabs.querySelector( '.tab[data-id="' + bt.dataset.target + '"]' ).classList.add( 'active' ); }, false ); } ); } ); function removeTabActive( tabs ) { tabs.querySelectorAll( '.active' ).forEach( function( a ) { a.classList.remove( 'active' ); } ); } }, false ); ``` **動くサンプル:** 【Document.querySelectorAll() - Web API | MDN】 【NodeList.prototype.forEach() - Web API | MDN】 【Element.classList - Web API | MDN】 【HTMLElement.dataset - Web API | MDN】