js（jquery）が動かない?

###タブの切替実装について

タブの切替を実装したく下記ページを参考に実装いたしました。
参考サイト

ただ、実装したファイルをローカルで開いて確認したところ
エラーはないのですが動かず解決方法がわかりません。。。

console.log("hello world!");
で確認したところ「hello world!」とConsoleに表示はされました。

該当のソースコード

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    <title>Document</title>
7    <link rel="stylesheet" href="css/0614.css" type="text/css">
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
9    <script src="js/0614.js"></script>
10</head>
11<body>
12    <div id="wrap">
13  <div id="tab1" class="tab selected">Tab 1</div>
14  <div id="tab2" class="tab">Tab 2</div>
15  <div id="tab3" class="tab">Tab 3</div>
16  <div id="tab4" class="tab">Tab 4</div>
17
18  <div id="container">
19    <div id="slide" class="">
20      <div id="first" class="box">Check this Out</div>
21      <div id="second" class="box">TAB TWO</div>
22      <div id="third" class="box">TAB THREE</div>
23      <div id="four" class="box">TAB FOUR</div>
24    </div>
25  </div>
26</div>
27</body>
28</html>

js
1$("#tab1").click(moveToFirst);
2$("#tab2").click(moveToSecond);
3$("#tab3").click(moveToThird);
4$("#tab4").click(moveToFour);
5
6function moveToFirst() {
7    $("#slide").attr('class', 'move-to-first');
8    $(".tab").attr('class', 'tab');
9    $("#tab1").attr('class', 'tab selected');
10}
11
12function moveToSecond() {
13    $("#slide").attr('class', 'move-to-second');
14    $(".tab").attr('class', 'tab');
15    $("#tab2").attr('class', 'tab selected');
16}
17
18function moveToThird() {
19    $("#slide").attr('class', 'move-to-third');
20    $(".tab").attr('class', 'tab');
21    $("#tab3").attr('class', 'tab selected');
22}
23
24function moveToFour() {
25    $("#slide").attr('class', 'move-to-four');
26    $(".tab").attr('class', 'tab');
27    $("#tab4").attr('class', 'tab selected');
28}
29
30console.log("hello world!");

ファイル配置
0614.html
js--0614.js
css--0614.css

ゴールとしてること

タブをクリックすると、ページがスライドして変わる機能を実装したく存じます。

参考にしたサイトになります↓
３．流行りのスライドショータイプのタブ切り替えのCSSデザイン例。
タブ切り替え時にスライドアニメーションで変化。JSの内容もシンプルでGOOD!
参考サイト

補足情報

大変恐縮ですが、プログラミングにつきまして
初心者のため何が違うのかなど詳しくご教示いただけると幸いです。

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

m.ts10806

2020/06/14 07:48

URLはマークダウンのリンクを使用してください

06140614

2020/06/14 08:32

@m.ts10806様失礼いたしました。次回からはリンクを使用し記述いたしますm

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

回答1件

ベストアンサー

script要素をbody閉じタグ直前に移動させてください。

投稿2020/06/14 07:45

編集2020/06/14 07:46

kyoya0819

総合スコア10429

06140614

2020/06/14 08:33

コメントしてくださり、ありがとうございます！ > script要素をbody閉じタグ直前に移動させてください。 →こちらの方法で解決いたしましたのでベストアンサーにさせていただきましたm

kyoya0819

2020/06/14 10:26 編集

ちなみに、これを用いると解決する理由を以下簡単に記述します。基本的に、プログラムは上から下に読まれていきます。「js/0614.js」が読み込まれた時点では、JavaScriptファイル内に記述された各種HTMLの要素は読まれていません。なので、「え？この要素なくね？じゃあ飛ばす！」という感じで適用されないわけです。 bodyの閉じタグの直前に入れると、「おっ要素あるじゃん！適用しますぜ〜」となり、正しく動作するようになります。または、jsファイルの中身全てを、 window.onload = function(){ //ここに }; 記述する方法でも動作すると思います。

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