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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

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

jQuery

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

Q&A

解決済

1回答

1589閲覧

jQueryを使ってタブ制作

mmmmmmmmmmmmmm

総合スコア14

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2021/04/30 08:27

編集2021/04/30 09:39

JavaScript(jQuery)のコード分かる方お願いします。

以下の2つのコードを使わなければなりません。
(※HTMLのコードは新規追記は厳禁)
![イメージ説明

完成イメージはこいう感じです。

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 28 <!-- jQuery --> 29 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 30 <script src="main.js"></script> 31</body> 32 33</html>

CSS

1/* ページ全体での文字色の設定 */ 2body { 3 color: #3f4548; 4} 5 6/* divのデフォルトスタイルを消去 */ 7.tabs-menu { 8 margin: 0; 9 padding: 0; 10} 11 12/* タブの基本スタイル */ 13.tabs-menu div { 14 display: block; 15 float: left; 16 padding: 10px 20px; 17 margin-right: 8px; 18 margin-bottom: -1px; 19 border-style: solid; 20 border-width: 1px; 21 border-color: transparent; 22 border-radius: 4px 4px 0 0; 23 color: #557f95; 24 text-decoration: none; 25 cursor: pointer; 26 /* 各プロパティをふわっと変える演出 */ 27 transition: all 0.15s; 28} 29 30/* 非選択のタブにマウスカーソルを乗せたら色を変える(追記してください) */ 31.tabs-menu div:not(.active):hover { 32 border-color: #f0f0f0 #f0f0f0 #999; 33 background-color: #f0f0f0; 34 35} 36 37/* 選択中のタブ */ 38.tabs-menu .active { 39 color: #3f4548; 40 border-color: #999 #999 transparent #999; 41 background-color: #fff; 42} 43 44/* タブコンテンツ表示エリア */ 45.tabs-content { 46 clear: both; 47 border: 1px solid #999; 48 border-radius: 0 4px 4px 4px; 49 padding: 10px; 50} 51 52/* 各タブのコンテンツはデフォルトで非表示 */ 53.tabs-content > div { 54 display: none; 55} 56

JavaScript

1/** 2 * selectorに該当するタブを表示する関数 3 */ 4const showTab = (selector) => { 5 // 引数selectorの中身をコンソールで確認する 6 console.log(selector); 7 8 /* 1. タブの選択状態のリセット*/ 9 10 // いったん、すべての.tabs-menu > divからactiveクラスを削除する 11 $('.tabs-menu > div').removeClass('active'); 12 13 // いったん、すべての.tabs-content > divを非表示にする 14 $('.tabs-content > div').hide(); 15 16 // 2. 選択されたタブの表示 17 18 //.tabs-menu divのうち、selectorに該当するものにだけactiveクラスをつける 19 20 if (selector === 'tab-menu-a') { 21 $('p').show(); 22 23 } else if (selector === 'tab-menu-b') { 24 25 26 } else if (selector === 'tab-menu-c') { 27 28 29 }; 30 31 $(`.tabs-menu div[id="${selector}"]`) 32 .addClass('active'); 33 34 35 $(selector).show(); 36}; 37 38 39// タブがクリックされたらコンテンツ表示 40$('.tabs-menu div').on('click', (e) => { 41 //idの値を受け取った後、showTab()関数に渡す。e.targetはクリックされたタブ(.tabs-menu div)を表す 42 const selector = $(e.target).attr('id'); 43 showTab(selector); 44 45}); 46 47//初期状態として1番目のタブを表示 48showTab('tab-menu-a'); 49

JavaScriptは途中までしかできてません(´;ω;`)
特にif文のところがうまくできません。

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

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

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

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

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

miyabi_takatsuk

2021/04/30 09:15

まずは自身でJSを書いてみて、それでもわからないって部分を聞く質問にしましょう。 その際、自身のJSコードも載せてください。
guest

回答1

0

ベストアンサー

下記でどうでしょう。

jQuery

1$(function() { 2 $('.tabs-menu > div').click(function() { 3 $(this).addClass("active") 4 .siblings().removeClass("active"); 5 $('.tabs-content>div').eq($(this).index()).fadeIn() 6 .siblings().hide(); 7 }); 8});

投稿2021/04/30 11:39

hatena19

総合スコア33620

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

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

mmmmmmmmmmmmmm

2021/04/30 11:53

ありがとうございます 参考になります!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問