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

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

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

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

jQuery

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

Q&A

解決済

1回答

1506閲覧

js(jquery)が動かない?

06140614

総合スコア2

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2020/06/14 07:44

編集2020/06/14 08:31

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

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

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

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

ゴールとしてること

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


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


補足情報

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

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

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

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

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

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

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

m.ts10806

2020/06/14 07:48

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

2020/06/14 08:32

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

回答1

0

ベストアンサー

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(){ //ここに }; 記述する方法でも動作すると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問