動画の読み込みに失敗しました。しばらく待ってからリロードしてみてください。解決しない場合は ヘルプ「動画が見られない場合について」 もご覧ください。
The video could not be loaded, either because the server or network failed or because the format is not supported.
<!DOCTYPE·html>¬
·lang="ja"¬
¬
···charset="utf-8"¬
··My·Playground¬
··¬
····.container·{¬
······margin:·16px·auto;¬
······width:·500px;¬
····}¬
····.tabs·{¬
······list-style:·none;¬
······padding:·0;¬
······margin:·0;¬
······display:·flex;¬
····}¬
····.tabs·li·a·{¬
······display:·inline-block;¬
······width:·80px;¬
······text-align:·center;¬
······padding:·8px;¬
······color:·#333;¬
······text-decoration:·none;¬
····}¬
····.tabs·li·a.active·{¬
······background:·#333;¬
······color:·#fff;¬
····}¬
····.content.active·{¬
······background:·#333;¬
······color:·#fff;¬
······min-height:·150px;¬
······padding:·12px;¬
······display:·block;¬
····}¬
····.content·{¬
······display:·none;¬
····}¬
··¬
¬
¬
···class="container"¬
·····class="tabs"¬
·······href="#"·class="active"·data-id="p1"商品1¬
·······href="#"·data-id="p2"商品2¬
·······href="#"·data-id="p3"商品3¬
····¬
·····class="content·active"·id="p1"¬
······商品1の説明です。¬
····¬
·····class="content"·id="p2"¬
······商品2の説明です。¬
····¬
·····class="content"·id="p3"¬
······商品3の説明です。¬
····¬
··¬
··¬
····//·タブのリンク要素を取得¬
····const·tabs·=·document.querySelectorAll('.tabs·li·a');¬
····//·コンテンツの要素を取得¬
····const·contents·=·document.querySelectorAll('.content');¬
····¬
····//·すべてのタブ要素に対して処理を実行¬
····tabs.forEach(clickedItem·=>·{¬
······//·タブがクリックされたときの処理¬
······clickedItem.addEventListener('click',·e·=>·{¬
········//·リンクによるページ遷移を抑制¬
········e.preventDefault();¬
········¬
········//·いったんすべてのタブを非アクティブにする¬
········tabs.forEach(item·=>·{¬
··········item.classList.remove('active');¬
········});¬
········//·クリックされたタブだけアクティブにする¬
········clickedItem.classList.add('active');¬
¬
········//·いったんすべてのコンテンツ要素を非アクティブにする¬
········contents.forEach(content·=>·{¬
··········content.classList.remove('active');¬
········});¬
········//·クリックされたタブに対応するコンテンツ要素だけアクティブ
にする¬
········document.getElementById(clickedItem.dataset.id).classList
.add('active');¬
······});¬
····});¬
··¬
¬
¶
サーバーとの接続が切断されました。ブラウザを再読込してみてください。
保存しました
ファイル構成
- index.html
ブラウザ実行環境を使ってみよう！
このレッスンでは、こちらにコードを打ち込みながら学習を進めていくことができます。
手元で実際に動作を確認しながら理解を深めていくと良いでしょう。
この機能を利用するには無料のユーザー登録が必要です。
