前提・実現したいこと
現在、情報系のサイトを作成しております。
サイト内にjavascriptを使って2つのタブ(タブ1、タブ2)を作成しました。
ここからが本題で、以下のような動作を実現したいと考えております。
①タブ1(背景:水色)の中身が開いている状態で、タブ2の背景が白の状態。
②タブ2をクリックした時、タブ2の背景がピンクに切り替わり、タブ1の背景が水色から白に切り替わる。
※ポカリスエット公式サイトのようなタブをイメージしていただければわかりやすいかと思います。
コード
javascript
1 <script type="text/javascript"> 2 3 // 対象の要素を得る 4 var tabs = document.getElementById('tabcontrol').getElementsByTagName('a'); 5 var pages = document.getElementById('tabbody').getElementsByTagName('div'); 6 7 function changeTab() { 8 // ▼href属性値から対象のid名を抜き出す 9 var targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length); 10 11 // ▼指定のページだけを表示する 12 for(var i=0; i<pages.length; i++) { 13 if( pages[i].id != targetid ) { 14 pages[i].style.display = "none"; 15 } 16 else { 17 pages[i].style.display = "block"; 18 } 19 } 20 21 // ▼クリックされたタブを前面に表示する 22 for(var i=0; i<tabs.length; i++) { 23 tabs[i].style.zIndex = "0"; 24 } 25 this.style.zIndex = "10"; 26 27 // ▼ページ遷移しないようにfalseを返す 28 return false; 29 } 30 31 // すべてのタブに対して、クリック時にchangeTab関数が実行されるよう指定する 32 for(var i=0; i<tabs.length; i++) { 33 tabs[i].onclick = changeTab; 34 } 35 36 // 最初は先頭のタブを選択 37 tabs[0].onclick(); 38 39 </script> 40
CSS
1 <style type="text/css"> 2 3 /* ▼タブ領域全体 */ 4 #tabcontrol { 5 margin: 0; 6 } 7 8 /* ▼タブ */ 9 #tabcontrol a { 10 display: inline-block; /* インラインブロック化 */ 11 border-width: 1px 1px 0px 1px; /* 下以外の枠線を引く */ 12 border-color: black; /* 枠線の色:黒色 */ 13 border-radius: 0.75em 0.75em 0px 0px; /* 枠線の左上角と右上角だけを丸く */ 14 padding: 0.75em 3.5em; /* 内側の余白 */ 15 text-decoration: none; /* リンクの下線を消す */ 16 color: black; /* 文字色:黒色 */ 17 background-color: white; /* 背景色:白色 */ 18 font-weight: bold; /* 太字 */ 19 position: relative; /* JavaScriptでz-indexを調整するために必要 */ 20 } 21 22 /* ▼タブの中身 */ 23 #tabbody div { 24 max-width: 100%; 25 margin-top: -1px; /* 上側にあるタブと1pxだけ重ねるために「-1px」を指定 */ 26 padding: 1em; /* 内側の余白 */ 27 background-color: white; /* 背景色:白色 */ 28 position: relative; /* z-indexを調整するために必要 */ 29 z-index: 0; /* 重なり順序を「最も背面」にするため */ 30 min-height: 5em; /* 最低の高さが必要なら指定(不要なら省略可) */ 31 } 32 33 /* ▼タブの配色 */ 34 #tabcontrol a:nth-child(1) { background-color: #BBFFFF; } /* 1つ目のタブとその中身用の配色 */ 35 #tabcontrol a:nth-child(2) { background-color: #FFCCFF; } /* 2つ目のタブとその中身用の配色 */ 36 37 </style>
html
1<html lang="ja"> 2<head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>タブサンプル</title> 5 <meta name="viewport" content="initial-scale=1"> 6</head> 7<body> 8 9 <h1>タブサンプル</h1> 10 11 12 13 <!-- ================ --> 14 <!-- ▼タブを作るHTML --> 15 <!-- ================ --> 16 <div class="sample-area"> 17 18 <p id="tabcontrol"> 19 <a href="#tabpage1">タブ1</a> 20 <a href="#tabpage2">タブ2</a> 21 </p> 22 <div id="tabbody"> 23 <div id="tabpage1">タブ1の中身<br><h2>■CSS3:</h2><ul><li>テスト1</li><li>テスト2</li><li>テスト3</li><li>テスト4</li><li>テスト5</li></ul></div> 24 <div id="tabpage2">タブ2の中身<br><h2>■JavaScript:</h2><ul><li>テスト6</li><li>テスト7</li><li>テスト8</li><li>テスト9</li><li>テスト10</li></ul></div> 25 </div> 26 27 </div> 28 29</body> 30</html>
補足情報(FW/ツールのバージョンなど)
sublimeで、動作がするかどうか試しています。
プログラミングは初心者なので、色々なサイトを参考にコードを書いてます。
発生している問題
実現したい内容について、そもそもjsを使えばいいのか、cssを使えばいいのかがわかりません。
他社のサイトも色々調べたりしたのですが、近しい情報がございませんでした。
どのコードを使って、どのように記述すれば動作するのかご教授お願いします。
回答2件
あなたの回答
tips
プレビュー