JSで実装するタブが動きません。

前提・実現したいこと

JS/CSS（SCSS）/HTMLでタブを実装したいのですがうまくいきません。
CSS（SCSS）/HTMLまでは挙動は想定通りできているのでJSの問題かもしれません。
jQueryの読み込みができていないとかでしょうか？？？
Code pen内で実装してみています。

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

HTML
1<div class="tab_wrap">
2	<div class="tab_area">
3		<label class="tab_label" for="tab1">tab1</label>
4		<label class="tab_label" for="tab2">tab2</label>
5		<label class="tab_label" for="tab3">tab3</label>
6	</div>
7	<div class="panel_area">
8		<div id="panel" class="tab_panel">
9			<p>panel1</p>
10		</div>
11		<div id="panel" class="tab_panel">
12			<p>panel2</p>
13		</div>
14		<div id="panel" class="tab_panel">
15			<p>panel3</p>
16		</div>
17	</div>
18</div>
19

SCSS
1.tab_wrap{width:500px; margin:80px auto;}
2
3.tab_area{font-size:0; margin:0 10px;
4  
5  label{width:150px; margin:0 5px; display:inline-block; padding:12px 0; color:#999; background:#ddd; text-align:center; font-size:13px; cursor:pointer; transition:ease 0.2s opacity;}
6  
7  label:hover{opacity:0.5;}
8}
9
10.panel_area{background:#fff;
11  
12  .tab_panel{width:100%; padding:80px 0; display:none;}
13  
14  .tab_panel p{font-size:14px; letter-spacing:1px; text-align:center;}
15}
16
17
18
19.tab_area label.active{background:#fff; color:#000;}
20.tab_panel.active{display:block;}
21
22

JavaScript
1$(".tab_label").on("click",function(){
2	var $th = $(this).index();
3	$(".tab_label").removeClass("active");
4	$(".tab_panel").removeClass("active");
5	$(this).addClass("active");
6	$(".tab_panel").eq($th).addClass("active");
7});

退会済みユーザー

2019/05/25 18:26

何がうまくいかないんですか？

hentaiman

2019/05/25 19:26

タイトルに「JSで実装するタブが動きません。」って書いてありますよ書いてるコードも試してる環境も記載しているから、この程度の質問なら質問分に書く内容はこれで十分です

退会済みユーザー

2019/05/25 20:54 編集

hentaiman: いえ、普通に質問文のソースで動くので、どこが悪いかはっきりと特定できないです

行動規範の内容に同意します

回答2件

CodePenで試したところ、問題なく動作したため
jQueryが読み込まれていないだけです。
https://codepen.io/anon/pen/MdGOJb

CodePenでjQueryを読み込むには
Settings => JavaScriptのAdd External Scripts/Pensで
jQueryを検索して追加します。

投稿2019/05/25 23:19

yasutomi

総合スコア2937

harebareyukai

2019/05/26 01:19

な、な、な、なるほど。初歩的なミス....ありがとうございます。

行動規範の内容に同意します

$(".tab_panel").eq($th)

で取れるのはjqueryObjectじゃなくてdomElementなので、

$($(".tab_panel").eq($th)).addClass("active");

またはjqueryオブジェクトのままで

$(".tab_panel:eq("+$th+")").addClass("active");

jsの動作とは関係ないけどidはユニークにしましょう

投稿2019/05/25 19:14

編集2019/05/25 19:28

hentaiman

総合スコア6419

hentaiman

2019/05/25 19:24 編集

--補足コメントを回答に追記し直したので削除--

退会済みユーザー

2019/05/25 20:57 編集

・で取れるのはjqueryObjectじゃなくてdomElementなので、ほんとうですか？公式サイトにはjQueryオブジェクトをかえすみたいなこと書いてありました

harebareyukai

2019/05/26 01:20

ありがとうございます。この場合、jQueryをまったく使わずに記述する場合はどのような記述になるのでしょうか。

hentaiman

2019/05/26 01:41

ECMAScript6ならArray.fromとforEachとquerySelectorAll使えば大体似たような作り方出来るので調べながら作ってみてください。それでしっかり時間かけて試行錯誤してもうまくいかなかったらまた質問してみてください。その時はあなたのコードの出来次第ですが、おかしな部分を指摘するか直すかして回答しますよ。

think49

2019/05/26 09:06

@hentaiman さん > $(".tab_panel").eq($th) > で取れるのはjqueryObjectじゃなくてdomElementなので、「退会済みユーザー」さんの指摘通り、jQuery#eq() は jQuery オブジェクトを返します。 https://api.jquery.com/eq/

hentaiman

2019/05/26 12:33

補足してくれてありがとう。getと間違えてたようです。けどよくわからんが動いてるからヨシ！とAPIドキュメントを読まないタイプの人この嘘回答によって誤った知識を埋め込まれていくのでしょう・・・コメントまで読めば危機を逃れる仕様

think49

2019/05/26 13:18

@hentaiman さんコンソールで $(".tab_panel").eq($th) を叩いてみるとか、$(".tab_panel").eq($th).classList.add("active"); を実行してみるとか、確認手段はいくつかあります。 jQueryはルーズなつくりなのでこの回答のコードでも動くことは動きますが、Array.from([1,2,3]).forEach(v=>console.log(v)) のような本来、不必要な変換処理が走っています。 http://api.jquery.com/jQuery/#jQuery-elementArray

hentaiman

2019/05/26 13:22

ありがとう。さすがに自分で作る時にはあいまいな事柄はちゃんと調べるので・・・もしよければそれらのコメントを新たな回答として残してあげてくださいそしてhentaimanの回答は間違ってますと明言しちゃってください

hentaiman

2019/05/26 13:43

ところで質問とは関係ないんですが疑問が数件 QA系のサービス使うのはこれが初めてだけど、トコトン間違ってないように絶対正確に回答をしなきゃいけないルールですか？正確じゃなくて回答がヒントになって解決する事もあるだろう程度に考えてるんですけども基本的に問題さえ解決すれば良い極端な例で言うと、DBにindex張ってなくても件数少なければ顕著な影響が出るわけでないので、誰かが作ったシステムでindex張って無くても厳しく指摘する事もないと考えています。 javascriptで冗長な処理があるとして、それは処理する量が著しく多くて重いとかでもなければ構わないと思ってます。無駄を省くとなるとそもそもjqueryを使わなければいいという回答をすれば良いという考え方です。

raccy

2019/05/26 15:29

> QA系のサービス使うのはこれが初めてだけど、トコトン間違ってないように絶対正確に回答をしなきゃいけないルールですか？正確じゃなくて回答がヒントになって解決する事もあるだろう程度に考えてるんですけども質問が曖昧または情報不足だったり、あまりにも特殊で確かめることが難しかったりした場合は、回答が全く見当違いだったり、正解への足がかり程度しかならない事も多々あるので、正解でなければならないということはないと思います。ただ、質問の正解になる・ならない以前に「間違った情報」は低評価になると私は思っています。 hentaimanさんの回答は、正解になるとか、解決のためになる以前に「間違った情報」が記載されているので、低評価を押させていただきます。

hentaiman

2019/05/26 15:36

その通り、間違ったものにはたくさん低評価押された方がいいです。コレがダメだ、と一目でわかるのは良いと思います。 think49さんは指摘の後のコメントで、私にコンソールの使い方とかの話をされたので、無償で回答するこういう場でそこまでする必要があるのか？と思って返事を書いただけで、評価についての話はしていません。

think49

2019/05/26 23:53 編集

@hentaiman さんその質問は私一人に向けられるべきではなく、teratailで新規質問を立てるのが望ましいと思います。私見としては、 > QA系のサービス使うのはこれが初めてだけど、トコトン間違ってないように絶対正確に回答をしなきゃいけないルールですか？ https://teratail.com/questions/177440#reply-264029 のraccyさんの回答に同意です。自由に回答してかまいませんが、他の方にhentaiman さんの意志が伝わるわけではありませんので、コメントでの指摘に疑問を感じるようなら、回答文に免責事項を添えておくと良いでしょう。それで他人から間違いを指摘されることが止まるわけではありませんが、hentaiman さんの意志が周囲に伝わる事が重要です。 > 基本的に問題さえ解決すれば良い「そうだな・・・　わたしは『結果』だけを求めてはいない。『結果』だけを求めていると、人は近道をしたがるものだ・・・近道した時『真に理解する機会』を見失うかもしれない。やる気もしだいに失せていく。大切なのは『理解しようとする意志』だと思っている。理解しようとする意志さえあれば、たとえ今回は分からなくても、いつかはたどり着くだろう？向かっているわけだからな・・・違うかい？」という言い回しで伝わりそうな気がしますね。現実には『結果』だけを求めてBAを選ぶ質問者が大半ですが、長期的には理解しようとする道が最適解と私は考えます。 > think49さんは指摘の後のコメントで、私にコンソールの使い方とかの話をされたので、「けどよくわからんが動いてるからヨシ」とあったので、再補足しましたが、hentaiman さんが理解可能なら補足する意志はありませんでした。質問者の為にあえて補足することもありますが。 > 無駄を省くとなるとそもそもjqueryを使わなければいいという回答をすれば良いという考え方です。極論に持って行くと、あらゆる指摘が無為と化すので、その返事はいかがなものかと思いますが、免責事項を添えておけば、こうしたやりとりは減ると思われます。私は「よく分からん」で返されるのが、回答した時間を否定されたようで一番悲しいです。先の言葉を引くと、『理解しようとする意志』をhentaiman さんに感じませんでした。

hentaiman

2019/05/27 00:26

> 私は「よく分からん」で返されるのが、これは > 「けどよくわからんが動いてるからヨシ」の後ろに改行入れずにコメントしておけばよかったですね。それでも伝わらないなら文章そのものが伝わりにくかったという事で、一応頭に置いておきます。 > その質問は私一人に向けられるべきではなく、teratailで新規質問を立てるのが望ましいと思います。技術に関係ない質問に対しては補足に「複数の人から不適切うんぬん・・」と書いてあるのを何度か見た事があるのでその質問を立てるのは不適切だと思ってましたが、適切ですか？使い始めて２～３日の頃は「ベストアンサーの基準おかしくない？」というニュアンスの質問立てようと思ったこともありましたが前述の理由でやめました。 think49さんだけに質問した前述以外の理由は、コンソールに関するコメントを見た時に、先にも書いた通り回答するのにわざわざ動作確認まで済ましてから答えてやらないかんのかと感じたからです。コンソールの使い方を回答者に向けてではなく質問者に向けての注意や補足としてくれていればそう感じる事も無かったのでthink49さんに質問をするという事も無かったです。 > 回答文に免責事項を添えておくと良いでしょう。これはちょっと意味が分からない。think49さんは常に免責事項を添えて回答してるってことですか？それとも添えずに回答して誰かに指摘され誤りに気付いたら免責事項を追記する、気付かなければそのまんま、って事ですか？

think49

2019/05/27 04:01

@hentaiman さん > > 「けどよくわからんが動いてるからヨシ」 > の後ろに改行入れずにコメントしておけばよかったですね。改行があっても、知っているようには読めませんでした。 > 技術に関係ない質問 https://teratail.com/users/teratail が https://teratail.com/tags/teratail に寄せられた「プログラミングに関係ない質問」に回答した事例があり、teratail関連の質問は例外と認識しています。 > わざわざ動作確認まで済ましてから答えてやらないかんのかと感じたからです。私はそんなことは言っていませんよ。回答者の自由です。私は「未検証ですが」と前置きして回答することはありますが。 > コンソールの使い方を回答者に向けてではなく質問者に向けての注意や補足としてくれていればそう感じる事も無かったのでthink49さんに質問をするという事も無かったです。先にも書きましたが、「よくわからん」と書いたことに対して確認方法を指摘しただけです。知っているなら、他の人が分かるように書いて下さい。「面倒だから確認しませんが」とか、書きようはあると思います。 > think49さんは常に免責事項を添えて回答してるってことですか？「わざわざ動作確認まで済ましてから答えてやらないかんのか」とあったように、コメントによる指摘を煩わしく感じている様子でしたので、回答ポリシーを事前に明確にしておくことを提案しました。毎回、このやりとりをすることに不都合を感じていないのでしたら、現状維持で問題ありません。

hentaiman

2019/05/27 04:43

> 改行があっても、知っているようには読めませんでした。では無知な私に親切に教えてくれてありがとうございました。 > コメントによる指摘を煩わしく感じている様子でしたので補足ありがとうgetと間違いた、返答済みです。 > 毎回、このやりとりをすることに不都合を感じていないのでした悪意やそれに準ずる感情が元で書かれているコメントなら面倒くさいし、本当にただの親切心でコメントを書いてくれているのならそれは真面目に応対したいと思います。少なくとも今は質問の回答から外れながら続くあなたのコメントを見て、意見の押し付けをしたいのか？と感じています。 hentaimanの考えはコレでthink49さんの考えはアレですあら合いませんねそうですか、で終われば良くないですか？ think49さんは余り関係ないけど、なんで突然低評価の説明をされたのかは未だに分かってません。低評価を押されている理由をわざわざ言われるのは面倒くさいと感じました。新たな回答してhentaiman間違ってると明言してとは言ったけど、わざわざ低評価の説明をされる原因になるような事は言った覚えはないし。仕方ないので、あえてなんで低評価にするんだよ！！