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

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

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

コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

JavaScript

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

jQuery

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

HTML

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

CSS

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

Q&A

解決済

1回答

232閲覧

タブの切り替え機能の実装で躓いてしまっております。

jadorehana

総合スコア13

タブ

コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

JavaScript

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

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/06/08 02:46

前提・実現したいこと

簡単なタブ切り替えの実装で躓いております。

Codepenでやってみたところ、うまく動かずにお手上げ状態です。

https://codepen.io/yuihana/pen/gJVMNZ

参考URLは、https://boel.jp/tips/vol86_tabselect.htmlのサイトで行いました。

何が間違って不具合が起きているのか、教えていただけないでしょうか。

お手数おかけいたしますが、何卒よろしくお願い致します。

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

jQueryが動かない

該当のソースコード

<div class="tab_wrap"> <div class="tab_area"> <label class="tab1_label" for="tab1">tab1</label> <label class="tab2_label" for="tab2">tab2</label> <label class="tab3_label" for="tab3">tab3</label> </div> <div class="panel_area"> <div id="panel1" class="tab_panel"> <p>panel1</p> </div> <div id="panel2" class="tab_panel"> <p>panel2</p> </div> <div id="panel3" class="tab_panel"> <p>panel3</p> </div> </div> </div> .tab_wrap{width:470px; margin:80px auto;} .tab_area{font-size:0; margin-right:30px; text-align:right;} .tab_area label{width:90px; margin-right:10px; display:inline-block; padding:14px 0 12px; color:#fff; background:#90C9CF; text-align:center; font-size:13px; cursor:pointer; transition:ease 0.2s; border:4px solid #90C9CF; border-bottom:none; border-radius:30% 5% 2% 5%/ 14% 40% 25% 25%; transform:translateY(8px); position:relative;} .tab_area label:last-of-type{margin-right:0;} .tab_area label:hover{background:#afd6d8;} .panel_area{width:100%; background:#fff; padding:80px 0; border:4px solid #90C9CF; border-radius:2% 12% 2% 12%/ 22% 8% 22% 8%; position:relative; z-index:0;} .tab_panel{opacity:0; display:none;} .tab_panel p{font-size:14px; letter-spacing:1px; text-align:center;} $(".tab_label").on("click",function(){ var $th = $(this).index(); $(".tab_label").removeClass("active"); $(".tab_panel").removeClass("active"); $(this).addClass("active"); $(".tab_panel").eq($th).addClass("active"); });

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

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

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

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

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

guest

回答1

0

ベストアンサー

jQuery で付与している active クラスが、 CSS に記述されていないため、動作していないように見えることが原因です。以下のように active クラスを記述することで、質問者さんの実現したいことが行なえると思います(動作確認用リンク)。

CSS

1.tab_wrap { 2 width: 470px; 3 margin: 80px auto; 4} 5.tab_area { 6 font-size: 0; 7 margin-right: 30px; 8 text-align: right; 9} 10.tab_area label { 11 width: 90px; 12 margin-right: 10px; 13 display: inline-block; 14 padding: 14px 0 12px; 15 color: #fff; 16 background: #90c9cf; 17 text-align: center; 18 font-size: 13px; 19 cursor: pointer; 20 transition: ease 0.2s; 21 border: 4px solid #90c9cf; 22 border-bottom: none; 23 border-radius: 30% 5% 2% 5%/ 14% 40% 25% 25%; 24 transform: translateY(8px); 25 position: relative; 26} 27.tab_area label:last-of-type { 28 margin-right: 0; 29} 30.tab_area label:hover { 31 background: #afd6d8; 32} 33.panel_area { 34 width: 100%; 35 background: #fff; 36 padding: 80px 0; 37 border: 4px solid #90c9cf; 38 border-radius: 2% 12% 2% 12%/ 22% 8% 22% 8%; 39 position: relative; 40 z-index: 0; 41} 42.tab_panel { 43 opacity: 0; 44 display: none; 45} 46.tab_panel p { 47 font-size: 14px; 48 letter-spacing: 1px; 49 text-align: center; 50} 51.tab_area label.active { /* 追加 */ 52 background: #fff; 53 color: #000; 54} 55.tab_panel.active { /* 追加 */ 56 opacity: 1; 57 display: block; 58}

投稿2019/06/08 02:56

編集2019/06/08 02:58
s8_chu

総合スコア14731

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

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

jadorehana

2019/06/08 03:00

凄いです!とても素晴らしい回答をありがとうございました!本当に困っていたので、大変助かりました。心から感謝しています。またお願いするかもしれませんが、その時もどうぞよろしくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問