webページのタブ切り替えに関して

問題点

tab2やtab3をクリックしても何も反応がない。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<link rel="stylesheet" href="test.css">
7	<script src="test.js"></script>
8	<script src="jquery-3.5.1.min.js"></script>
9</head>
10<body>
11<div class="tab_wrap">
12	<div class="tab_area">
13		<label class="tab_label active" for="tab1">tab1</label>
14		<label class="tab_label" for="tab2">tab2</label>
15		<label class="tab_label" for="tab3">tab3</label>
16	</div>
17	<div class="panel_area">
18		<div id="panel1" class="tab_panel active">
19			<p>panel1</p>
20		</div>
21		<div id="panel2" class="tab_panel">
22			<p>panel2</p>
23		</div>
24		<div id="panel3" class="tab_panel">
25			<p>panel3</p>
26		</div>
27	</div>
28</div>
29</body>
30</html>

css
1.tab_wrap{width:500px; margin:80px auto;}
2.tab_area{font-size:0; margin:0 10px;}
3.tab_area 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;}
4.tab_area label:hover{opacity:0.5;}
5.panel_area{background:#fff;}
6.tab_panel{width:100%; padding:80px 0; display:none;}
7.tab_panel p{font-size:14px; letter-spacing:1px; text-align:center;}
8.tab_area label.active{background:#fff; color:#000;}
9.tab_panel.active{display:block; animation:tabAnim ease 0.6s forwards; -ms-animation:tabAnim ease 0.6s forwards;}

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

解決したい内容

webページのタブ切り替えを行いたい。
とあるサイトの内容をコピペし試してみたものの動作せず、いろいろ試してみましたが解決できずこちらのサイトを利用させて頂きました。
又、問題点とは別に完成を前提に1つ質問があります。（ゲームの育成シミュレーター、ステータスのシミュレーターのようなものを作成しようとしています。）
このjsの内容の場合、tab1で作業を行い、tab2をクリックした場合、tab1の状態は初期化されるという認識で間違いないでしょうか。

試した事

始めはpanelが全く表示されず、css内 display:none; の変更や別の場所で試してみたものの望んでいる結果にならず、HTML内classの tab_panel を tab_panel active に変更したところ表示されるようになった。

しかし、web上の tab2 , tab3 をクリックしてみても何も反応がありませんでした。

環境

windows10
VScode(Live Server)
Google Chrome(js有効済み)

私感

JavaScriptを現在進行で勉強中の為、理解できていません。
導入の段階でのミスがあるのではと考えています。

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

回答2件

ベストアンサー

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ 
  $(".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");
  });
});
</script>
<style>
.tab_wrap{width:500px; margin:80px auto;}
.tab_area{font-size:0; margin:0 10px;}
.tab_area 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;}
.tab_area 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; animation:tabAnim ease 0.6s forwards; -ms-animation:tabAnim ease 0.6s forwards;}
</style>
</head>
<body>
<div class="tab_wrap">
    <div class="tab_area">
        <label class="tab_label active" 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="panel1" class="tab_panel active">
            <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>
</body>
</html>

投稿2020/07/02 12:19

-millmill-

総合スコア676

jQuery
1$(document).ready(function(){ 
2
3//ここに現在のスクリプトをそのまま入れる
4
5});

これで動くと思います ^^;

追記

入れるのは現在コード全てなので

html
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

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

このようになります。

もしWordpressで動かしている場合は
このコードのままでは動かず
記述方法を少し変える必要があります。

投稿2020/07/02 09:48

編集2020/07/02 10:51

-millmill-

総合スコア676

LBciel.

2020/07/02 09:59

ご回答有難う御座います！・$(".tab_label").ready("click",function(){ ・$(".tab_label").ready(function(){ ・$(document).ready(function(){ 上記3点で試してみたものの動作しませんでした…

LBciel.

2020/07/02 10:01

jQueryは入れないとダメなのかと思い入れて試してダメでした。サイト上ではjQueryを使わずにと記載していました。

-millmill-

2020/07/02 10:49

これはjQueryなので、 CDNででもjQueryを入れないと動きません。。。コードを追記しますね^^

LBciel.

2020/07/02 12:01

度々のご回答有難う御座います！・jsに丸々コピペ・html内「jquery-3.5.1.min.js」を削除し「3.4.1」をhead内にコピペ以上で試してみましたが反応しませんでした。 VScode(Live Server)ではダメなのかと思い、実際にwebにアップロードし確認してみたものの反応なしでした。アップロードしたものは「html」「css」「js」を同じフォルダ内に入れてアップロードしています。

LBciel.

2020/07/02 12:32

ご回答有難う御座います！ 2つ目の回答でhtmlを作り試してみたところ動作しました！別ファイルのjsのhtmlへの入れ方が悪いのかもしれませんのでいろいろ試してみたいと思います。有難う御座いました！

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

あなたの回答