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

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

ただいまの
回答率

87.92%

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

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,497

score 15

前提・実現したいこと

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

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

<div class="tab_wrap">
    <div class="tab_area">
        <label class="tab_label" for="tab1">tab1</label>
        <label class="tab_label" for="tab2">tab2</label>
        <label class="tab_label" for="tab3">tab3</label>
    </div>
    <div class="panel_area">
        <div id="panel" class="tab_panel">
            <p>panel1</p>
        </div>
        <div id="panel" class="tab_panel">
            <p>panel2</p>
        </div>
        <div id="panel" class="tab_panel">
            <p>panel3</p>
        </div>
    </div>
</div>
.tab_wrap{width:500px; margin:80px auto;}

.tab_area{font-size:0; margin:0 10px;

  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;}

  label:hover{opacity:0.5;}
}

.panel_area{background:#fff;

  .tab_panel{width:100%; padding:80px 0; display:none;}

  .tab_panel p{font-size:14px; letter-spacing:1px; text-align:center;}
}



.tab_area label.active{background:#fff; color:#000;}
.tab_panel.active{display:block;}
$(".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");
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2019/05/26 03:26

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

    キャンセル

  • hentaiman

    2019/05/26 04:26

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/05/26 05:52 編集

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

    キャンセル

回答 2

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/26 10:19

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

    キャンセル

-6

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


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

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


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

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


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/27 13:43

    > 改行があっても、知っているようには読めませんでした。
    では無知な私に親切に教えてくれてありがとうございました。

    > コメントによる指摘を煩わしく感じている様子でしたので
    補足ありがとうgetと間違いた、返答済みです。

    > 毎回、このやりとりをすることに不都合を感じていないのでした
    悪意やそれに準ずる感情が元で書かれているコメントなら面倒くさいし、本当にただの親切心でコメントを書いてくれているのならそれは真面目に応対したいと思います。少なくとも今は質問の回答から外れながら続くあなたのコメントを見て、意見の押し付けをしたいのか?と感じています。
    hentaimanの考えはコレでthink49さんの考えはアレですあら合いませんねそうですか、で終われば良くないですか?

    think49さんは余り関係ないけど、なんで突然低評価の説明をされたのかは未だに分かってません。低評価を押されている理由をわざわざ言われるのは面倒くさいと感じました。
    新たな回答してhentaiman間違ってると明言してとは言ったけど、わざわざ低評価の説明をされる原因になるような事は言った覚えはないし。

    仕方ないので、あえて
    なんで低評価にするんだよ!!

    キャンセル

  • 2019/05/27 13:51

    低評価する時には「理由を説明しましょう」とメッセージが出ます。なので、説明するのが本来です。

    私は理由が明確な時には説明しないことも多いですが

    > 基本的に問題さえ解決すれば良い

    と書いているのを見れば説明すると思います。

    キャンセル

  • 2019/05/27 14:21

    なるほどそれで突然の低評価説明コメントが来たわけですか
    条件満たしても低評価ボタン無効化されてて押せないので知りませんでした
    押したから押した理由を説明したと、単純にteratailのルールに従った結果なんですね。

    キャンセル

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

  • ただいまの回答率 87.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る