質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

531閲覧

JSのタブ切り替えについて、切り替え時の背景を変更したいです。

pase

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/04/02 06:50

編集2019/04/02 07:24

前提・実現したいこと

現在、情報系のサイトを作成しております。
サイト内に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を使えばいいのかがわかりません。
他社のサイトも色々調べたりしたのですが、近しい情報がございませんでした。
どのコードを使って、どのように記述すれば動作するのかご教授お願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/04/02 07:02

「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
pase

2019/04/02 07:28

おっしゃる通りですね。 コードのどの部分というよりかはどのコード(js?、css?)を使えばいいのかという根本的なところからになります。また利用するコードからどう記述すればいいかも教えていただけると助かります。
guest

回答2

0

下記のようにすれば良いかと思います
一応、コメントアウトで変更箇所を示してあります

HTML5

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 <!-- idを追加。0スタートに変更 --> 20 <!-- <a href="#tabpage1">タブ1</a> 21 <a href="#tabpage2">タブ2</a> --> 22 <a id="tabpage0" href="#tabpage0">タブ1</a> 23 <a id="tabpage1" href="#tabpage1">タブ2</a> 24 </p> 25 <div id="tabbody"> 26 <!-- <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> 27 <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> --> 28 <!-- id削除 --> 29 <div id="">タブ1の中身<br><h2>■CSS3:</h2><ul><li>テスト1</li><li>テスト2</li><li>テスト3</li><li>テスト4</li><li>テスト5</li></ul></div> 30 <div id="">タブ2の中身<br><h2>■JavaScript:</h2><ul><li>テスト6</li><li>テスト7</li><li>テスト8</li><li>テスト9</li><li>テスト10</li></ul></div> 31 </div> 32 33 </div> 34 35 <style type="text/css"> 36 37 /* ▼タブ領域全体 */ 38 #tabcontrol { 39 margin: 0; 40 } 41 42 /* ▼タブ */ 43 #tabcontrol a { 44 display: inline-block; /* インラインブロック化 */ 45 border-width: 1px 1px 0px 1px; /* 下以外の枠線を引く */ 46 border-color: black; /* 枠線の色:黒色 */ 47 border-radius: 0.75em 0.75em 0px 0px; /* 枠線の左上角と右上角だけを丸く */ 48 padding: 0.75em 3.5em; /* 内側の余白 */ 49 text-decoration: none; /* リンクの下線を消す */ 50 color: black; /* 文字色:黒色 */ 51 background-color: white; /* 背景色:白色 */ 52 font-weight: bold; /* 太字 */ 53 position: relative; /* JavaScriptでz-indexを調整するために必要 */ 54 } 55 56 /* ▼タブの中身 */ 57 #tabbody div { 58 display: none; /* 追加 */ 59 max-width: 100%; 60 margin-top: -1px; /* 上側にあるタブと1pxだけ重ねるために「-1px」を指定 */ 61 padding: 1em; /* 内側の余白 */ 62 background-color: white; /* 背景色:白色 */ 63 position: relative; /* z-indexを調整するために必要 */ 64 z-index: 0; /* 重なり順序を「最も背面」にするため */ 65 min-height: 5em; /* 最低の高さが必要なら指定(不要なら省略可) */ 66 } 67 68 /* ▼タブの配色 */ 69 /* 変更 */ 70 /* #tabcontrol a:nth-child(1) { background-color: #BBFFFF; } 71 #tabcontrol a:nth-child(2) { background-color: #FFCCFF; } */ 72 #tabpage0:target{ background-color: #BBFFFF;} 73 #tabpage1:target{background-color: #FFCCFF;} 74</style> 75 76<script type="text/javascript"> 77 78 // 対象の要素を得る 79 var tabs = document.getElementById('tabcontrol').getElementsByTagName('a'); 80 var pages = document.getElementById('tabbody').getElementsByTagName('div'); 81 82 function changeTab() { 83 // ▼href属性値から対象のid名を抜き出す 84 // 変更 85 // var targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length); 86 let targetid = this.href.slice(-1); 87 88 // ▼指定のページだけを表示する 89 // 変更 90 // for(var i=0; i<pages.length; i++) { 91 // if( pages[i].id != targetid ) { 92 // pages[i].style.display = "none"; 93 // } 94 // else { 95 // pages[i].style.display = "block"; 96 // } 97 // } 98 for(var i=0; i<pages.length; i++) { 99 if( i != targetid ) { 100 pages[i].style.display = "block"; 101 } 102 else { 103 pages[i].style.display = "none"; 104 } 105 } 106 107 // ▼クリックされたタブを前面に表示する 108 for(var i=0; i<tabs.length; i++) { 109 tabs[i].style.zIndex = "0"; 110 } 111 this.style.zIndex = "10"; 112 113 // 削除 114 // ▼ページ遷移しないようにfalseを返す 115 // return false; 116 } 117 118 // すべてのタブに対して、クリック時にchangeTab関数が実行されるよう指定する 119 for(var i=0; i<tabs.length; i++) { 120 tabs[i].onclick = changeTab; 121 } 122 123 // 最初は先頭のタブを選択 124 // 変更 125 // tabs[0].onclick(); 126 window.location.href = "#tabpage0" 127 pages[0].style.display = "block"; 128 129</script> 130 131</body> 132</html> 133

投稿2019/04/02 09:30

編集2019/04/02 10:10
researcher

総合スコア87

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pase

2019/04/02 11:31

詳しくコードの内容を記載していただき、ありがとうございます。 実現したいと思っていた通りに、こちらでも動作が確認できました。 改めてありがとうございます。
guest

0

ベストアンサー

そもそもjsを使えばいいのか、cssを使えばいいのかがわかりません。

CSSのみで作ることも出来ますが、JavaScriptと組み合わせて使うのが簡単かと思います。

組み方にもよりますが、
0. idに頼った記述をしない(複数設置する時に記述量が増える)
0. JavaScriptで直接スタイルを変更するよりも、「選択された時」のクラスをCSSで用意しておくほうがコードが整理しやすい

と思います。

下記は適当に作ったので雑ですが、複数設置可能なタブ切り替えの例です。

HTML

1<div class="tab-wrap"> 2 <div class="tab-control"> 3 <button class="active" type="button" data-target="page1">タブ1</button> 4 <button type="button" data-target="page2">タブ2</button> 5 </div> 6 <div class="tab-contents"> 7 <div class="tab active" data-id="page1"> 8 <div class="tab-inner"> 9 タブ1の中身<br><h2>■CSS3:</h2><ul><li>テスト1</li><li>テスト2</li><li>テスト3</li><li>テスト4</li><li>テスト5</li></ul> 10 </div> 11 </div> 12 <div class="tab" data-id="page2"> 13 <div class="tab-inner"> 14 タブ2の中身<br><h2>■JavaScript:</h2><ul><li>テスト6</li><li>テスト7</li><li>テスト8</li><li>テスト9</li><li>テスト10</li></ul> 15 </div> 16 </div> 17 </div> 18</div><!-- >.tab-wrap< -->

CSS

1.tab-wrap { 2 margin-bottom: 2em; 3} 4 5/* ▼タブ */ 6.tab-control > button { 7 border: 0 none; 8 border-radius: 0.75em 0.75em 0 0; 9 padding: 0.75em 3.5em; 10 font-weight: bold; 11 background-color: #FFCCFF; 12} 13 14.tab-control > button.active { 15 background-color: #BBFFFF; 16} 17 18/* ▼タブ */ 19.tab-contents > .tab { 20 height: 0; 21 overflow: hidden; 22} 23 24.tab-contents > .tab.active { 25 height: auto; 26} 27 28.tab-contents > .tab > .tab-inner { 29 padding: 1em; 30}

JavaScript

1document.addEventListener( 'DOMContentLoaded' , function( e ) { 2 document.querySelectorAll( '.tab-wrap' ).forEach( function( tabs ) { 3 tabs.querySelectorAll( '.tab-control > button' ).forEach( function( bt, i ) { 4 bt.addEventListener( 'click', function( e ) { 5 removeTabActive( tabs ); 6 bt.classList.add( 'active' ); 7 tabs.querySelector( '.tab[data-id="' + bt.dataset.target + '"]' ).classList.add( 'active' ); 8 }, false ); 9 } ); 10 } ); 11 function removeTabActive( tabs ) { 12 tabs.querySelectorAll( '.active' ).forEach( function( a ) { 13 a.classList.remove( 'active' ); 14 } ); 15 } 16}, false ); 17```**動くサンプル:**[https://jsfiddle.net/sr6uL1w4/](https://jsfiddle.net/sr6uL1w4/) 18 19--- 20 21【Document.querySelectorAll() - Web API | MDN22[https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll) 23 24【NodeList.prototype.forEach() - Web API | MDN25[https://developer.mozilla.org/ja/docs/Web/API/NodeList/forEach](https://developer.mozilla.org/ja/docs/Web/API/NodeList/forEach) 26 27【Element.classList - Web API | MDN28[https://developer.mozilla.org/ja/docs/Web/API/Element/classList](https://developer.mozilla.org/ja/docs/Web/API/Element/classList) 29 30【HTMLElement.dataset - Web API | MDN31[https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/dataset](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/dataset)

投稿2019/04/02 10:16

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pase

2019/04/02 11:29

なるほど、jsとcssを組み合わせた方が楽なのですね! ご丁寧に詳細リンクまで添付していただきありがとうございます。 是非作成の参考にさせていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問