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

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

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

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

受付中

jqueryが正しく動いてくれない

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

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

0回答

-1評価

0クリップ

206閲覧

投稿2022/05/20 02:57

編集2022/05/30 13:00

前提

jqueryを正しく動作させたい

実現したいこと

上記と同じです。
jqueryに指示を3つ出したいのですが、1つが機能してくれません。
(②のheader部分のクリックをすると、その部分にクラス名を追加するものが動いてくれません。)

該当のソースコード

html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="favicon" href="/favicon.ico"> <!-- reset css --> <link rel="stylesheet" href="/css/reset.css"> <!-- font awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> <!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css" media="screen and (max-width:767px)"> <!-- jquery & iScroll --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script> <!-- drawer.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script> <!-- google font --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Satisfy&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://use.typekit.net/qph3iir.css"> <!-- swiper --> <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" /> <!-- original --> <link rel="stylesheet" href="/css/style.css"> <script src="/js/script.js"></script> </head> <body> <header class="header"> <section class="header"> <div class="header-container"> <div class="header-flex"> <a href="" class="header-container-img"> <img src="/img/logo_header.png" alt=""> </a> <nav class="header-nav"> <ul class="header-ul"> <li class="header-li"> <a href="#about" >About</a> </li> <li class="header-li"> <a href="#menu">Menu</a> </li> <li class="header-li"> <a href="#shop">Shop</a> </li> <li class="header-li"> <a href="#contact">Contact</a> </li> </ul> </nav> </div> </div> </section> </header>

scss

.header { position: fixed; width: 100%; z-index: 1000; } .header-container { background-color: #2F2F2F; padding-left: 31px; padding-right: 70px; @include mq(sp) { padding-left: 18px; padding-right: 16px; } } .header-container-img { @include mq(sp) { width: 14.4%; } } .header-flex { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; } .header-ul { display: flex; } .header-li { font-size: 1.8rem; line-height: calc(21.6/18); letter-spacing: 0.03em; color: #fff; font-family: 'reross-quadratic', sans-serif; position: relative; &::before { position: absolute; bottom: -3px; left: 0; content: ''; width: 0; height: 2px; background-color: #F2F4F1; transition: .3s; } &:hover::before { width: 100%; } &:not(:first-child) { margin-left: 40px; @include mq(sp) { margin-left: 20px; } } @include mq(sp) { font-size: 1.4rem; line-height: calc(16.8/14); } } .header-li.active { color: red; // width: 100%; // border-bottom: 2px solid #000; // background-color: #F2F4F1; }

jquery

$(window).on("scroll", function () { if (window.matchMedia("(max-width: 1023px)").matches) { if (8400 < $(this).scrollTop()) { $('.to-top').addClass('is-show'); } else { $('.to-top').removeClass('is-show'); } } else { if (9200 < $(this).scrollTop()) { $('.to-top').addClass('is-show'); } else { $('.to-top').removeClass('is-show'); } } }); $(function () { $('.header-li').click(function () { $('.header-li').removeClass('active'); $(this).addClass('active'); return false; }) }); $(function () { $('a[href^="#"]').click(function () { $('.nav-ul').removeClass('open'); let speed = 500; let type = 'swing'; let href = $(this).attr("href"); let target = $(href == "#" || href == "" ? 'html' : href); let position = target.offset().top; $("html,body").animate({ scrollTop: position }, speed, type); return false; }) });

試したこと

書き方の順番を入れ替えたりしたのですが、うまくいきませんでした。
①③をコメントアウトすると、②は動くような状態です。
①②③を動かしたいのですが、どこが間違っているか分からず困り果てています。

よろしくお願いします。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

recal

2022/05/20 03:36

htmlもおしえてください。
m.ts10806

2022/05/20 04:18

$(function () {}); の意味は理解されてますか?
m.ts10806

2022/05/20 04:19

あと、ブラウザの開発ツールのコンソールにエラーが出てないか確認してみてください。 その結果を質問本文に追記してください。
Lhankor_Mhy

2022/05/20 08:02

ご提示のコードを試してみましたが、問題が再現しませんでした。 おそらく、ご提示の部分には原因はなさそうに思います。 ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。 問題再現の手順をもう少し詳しく書いていただけますか?
退会済みユーザー

退会済みユーザー

2022/05/21 05:07 編集

ありがとうございます。 html,scss追記しました
m.ts10806

2022/05/21 04:35

質問は編集できますし、コメント欄ではマークダウン使えませんので。
nekora

2022/05/30 04:00 編集

SCSSのコンパイルでエラーが出ました。私の環境だけでしょうか? Compilation Error Error: no mixin named mq on line 14 of sass/c:\Users\xxxxx\Desktop\Untitled-5.scss >> @include mq(sp) {

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

jQuery

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