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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

Q&A

解決済

1回答

6139閲覧

jQueryでif文を使ったタブの表示をさせたい

daiki-6cats

総合スコア2

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

0グッド

0クリップ

投稿2020/04/28 01:09

編集2020/04/28 01:19

現在、jQueryでタブを作っており
if文を取り入れたタブの作成ができておらず
タブをクリックしても要素を表示することができません。

発生している問題・エラーメッセージ

タブの表示・タブの切り替え

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <title>JavaScript Test</title> 7 <link rel="stylesheet" href="main.css"> 8</head> 9 10<body> 11 <div class="tabs-menu"> 12 <div id="tab-menu-a">タブa</div> 13 <div id="tab-menu-b">タブb</div> 14 <div id="tab-menu-c">タブc</div> 15 </div> 16 <div class="tabs-content"> 17 <div id="tabs-a"> 18 <p>タブaの内容が入ります。</p> 19 </div> 20 <div id="tabs-b"> 21 <p>タブbの内容が入ります。</p> 22 </div> 23 <div id="tabs-c"> 24 <p>タブcの内容が入ります。</p> 25 </div> 26 </div> 27 <!-- jQuery --> 28 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 29 <script src="main.js"></script> 30</body> 31 32</html>

CSS

1body { 2 color: #3F4548; 3} 4 5 /* ulのデフォルトスタイルを消去 */ 6.tabs-menu { 7 margin: 0; 8 padding: 0; 9 list-style-type: none; 10} 11 12 /* タブの基本スタイル */ 13#tab-menu-a,#tab-menu-b,#tab-menu-c { 14 float: left; 15 margin-right: 8px; 16 margin-bottom: -1px; 17 border-style: solid; 18 border-width: 1px; 19 border-color: transparent; 20 border-radius: 4px 4px 0 0; 21 22 /* 各プロパティをふわっと変える演出 */ 23 transition: all .15s; 24 25 display: block; 26 padding: 10px 20px; 27 color: #557F95; 28 text-decoration: none; 29} 30 31 32 /* 非選択のタブにマウスを乗せたら色を変える */ 33.tabs-menu :not(.active):hover { 34 border-color: #f0f0f0 #f0f0f0 #999; 35 background-color: #f0f0f0; 36} 37 38 /* 選択中のタブ */ 39.tabs-menu .active { 40 border-color: #999 #999 transparent #999; 41 background-color: #fff; 42} 43.tabs-menu .active { 44 color: #3F4548; 45} 46/* タブコンテンツ表示エリア */ 47.tabs-content { 48 clear: both;/* ズレた物を直す */ 49 border: 1px solid #999;/* タブ下のコンテンツを囲む */ 50 border-radius: 0 4px 4px 4px;/* タブの囲みの角を丸くする */ 51 padding: 10px; 52} 53 54/* 角タブのコンテンツはデフォルトで非表示 */ 55.tabs-content { 56 display: none; 57} 58

jQuery

1/** 2 * selectorに該当するタブを表示する 3 * console.logをした時にtab-menu-aが出ないといけない 4 */ 5 6const showTab = (selector) => { 7 //因数selectorの中身をコンソールで確認する 8 console.log(selector); 9 10 //一度全てのタブa,b,cからactiveクラスを削除する 11 $(".tabs-menu div").removeClass("active"); 12 //タブのうち、selectorに該当するものだけにactiveクラスを付ける 13 $("div[id="+`${selector}`+"]").addClass('active'); 14 15 16 //一度全てのタブの内容を非表示にする 17 $(".tabs-content > div").hide(); 18 let tabContentId = '' 19 if(selector === 'tab-menu-a') { 20 tabContentId = 'tabs-a' 21 } else if(selector === 'tab-menu-b') { 22 tabContentId = 'tabs-b' 23 } else { 24 tabContentId = 'tabs-c' 25 } 26 27 $('#' + tabContentId).show() 28 //.tabs-content > tabs-のうち、selectorに該当するものだけを表す 29 $(selector).show(); 30}; 31 32// タブがクリックされたらコンテンツを表示 33$('.tabs-menu div').on('click', (e) => { 34 // hrefへのページ遷移とを止める 35 e.preventDefault(); 36 // hrefの値を受け取った後、showTab()関数に渡す。e.targetはクリックされたタブ(.tabs-menu a)を表す 37 const selctor = $(e.target).attr('id'); 38 39}); 40 41// 初期状態として1番目のタブを表示 42showTab('tab-menu-a');

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

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

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

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

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

guest

回答1

0

ベストアンサー

$(".tabs-content > div").hide();で非表示にするのだから以下は必要ないです。
これでとりあえず見えるようにはなります。

css

1.tabs-content { 2 display: none; /* 削除 */ 3}

タブをクリックしたのにshowTab()に渡していない。

JS

1// タブがクリックされたらコンテンツを表示 2$('.tabs-menu div').on('click', (e) => { 3 // hrefへのページ遷移とを止める 4 e.preventDefault(); 5 // hrefの値を受け取った後、showTab()関数に渡す。e.targetはクリックされたタブ(.tabs-menu a)を表す 6 const selctor = $(e.target).attr('id'); 7 8 showTab(selctor); /* 追加 */ 9});

投稿2020/04/28 01:34

soliste16

総合スコア757

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

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

daiki-6cats

2020/04/28 03:40

ありがとうございます! おかげで理解して実装ができました(^ ^)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問