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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

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

Q&A

解決済

1回答

820閲覧

クラスが付与されない(jQuery)

Yu-tade-su

総合スコア5

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

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

0グッド

0クリップ

投稿2020/11/29 01:28

gv-header-linkをクリックすると、gv-header-linkとsitemapが点滅し(デベロッパーツール)、jQueryは反応しているのですが、classが付きません。

php

1 <header class="gv-header"> 2 <button class="gv-header-link"></button> <!-- ここです --> 3 <div class="gv-header-logo"> 4 <a href="/" class="gv-header-logo-link"> 5 <svg role="img" class="l-header__logo__svg"> 6 <title>MOLS</title> 7 <desc>MOLS ロゴマーク</desc> 8 <use xlink:href="#logo"> 9 <svg id="logo" viewBox="0 0 100 31"> 10 <polygon id="M" class="st0" points="23.62,0.76 13.5,24.52 3.48,0.76 0,0.76 0,29.99 2.3,29.99 2.3,3.56 12.24,27.28 14.64,27.28 11 24.92,3.39 24.92,29.99 27.24,29.99 27.24,0.76 "></polygon> 12 <path id="O" class="st0" d="M48.03,0.33c4.34,0,7.97,1.45,10.89,4.34s4.39,6.46,4.39,10.69c0,4.19-1.46,7.75-4.37,10.67 13 c-2.92,2.92-6.47,4.38-10.67,4.38c-4.25,0-7.84-1.45-10.75-4.36c-2.92-2.91-4.39-6.42-4.39-10.56c0-2.74,0.67-5.3,2-7.65 14 c1.33-2.34,3.14-4.18,5.45-5.52C42.86,1,45.35,0.33,48.03,0.33z M48.15,2.49c-2.23,0-4.34,0.58-6.33,1.74 15 c-2,1.17-3.56,2.72-4.68,4.69s-1.68,4.16-1.68,6.58c0,3.58,1.24,6.6,3.72,9.06s5.47,3.7,8.97,3.7c2.34,0,4.5-0.57,6.49-1.7 16 c1.99-1.13,3.54-2.68,4.66-4.65s1.68-4.15,1.68-6.56c0-2.39-0.56-4.55-1.68-6.48c-1.11-1.93-2.68-3.48-4.7-4.64 17 C52.57,3.07,50.42,2.49,48.15,2.49z"></path> 18 <path id="L" class="st0" d="M68.94,0.76h2.31v26.95h7.36v2.28h-9.67V0.76z"></path> 19 <path id="S" class="st0" d="M98.73,4.54c0,0-2.51-4.54-7.53-4.54c-4.21,0-7.39,2.83-7.39,7.09c0,2.77,1.23,5.92,7.86,8.75 20 c3.24,1.38,6.02,2.91,6.02,6.01c0,3.29-2.68,6.61-6.87,6.61c-3.95,0-6.78-5.18-6.78-5.18l-1.99,1.24c0,0,3.27,6.35,8.76,6.35 21 c5.61,0,9.19-4.43,9.19-8.93c0-4.72-3.89-6.65-6.83-8.07c-5.08-2.45-7-4.8-7-6.74c0-2.15,1.42-4.81,4.94-4.81 22 c4.25,0,5.8,3.55,5.8,3.55L98.73,4.54z"></path> 23 </svg> 24 </use> 25 </svg> 26 </a> 27 </div> 28 <ul class="gv-header-sns"> 29 <li class="gv-header-sns-item"> 30 <a href="https://www.facebook.com/theMOLS/" class="gv-header-sns-link" target="_blank"> 31 <i class="fab fa-facebook-f"></i> 32 </a> 33 </li> 34 <li class="gv-header-sns-item"> 35 <a href="https://www.instagram.com/mols_kumamoto/" class="gv-header-sns-link" target="_blank"> 36 <i class="fab fa-instagram"></i> 37 </a> 38 </li> 39 </ul> 40 </header> 41 <div class="sitemap"> <!-- ここです --> 42 <a href="/" class="sitemap-logo"> 43 <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/img/logo-box.svg" alt="コンクリート住宅のMOLS"> 44 </a> 45 <div class="sitemap-inner"> 46 <?php wp_nav_menu( 47 array( 48 'theme_location' => 'sitemap', 49 'container' => false, 50 'container_class' => 'sitemap-nav', 51 'items_wrap' => '<ul class="sitemap-list">%3$s</ul>', 52 'depth' => 2, 53 'link_before' => '<span class="sitemap-item-link-en">' 54 ) 55 ); ?> 56 <div class="meta-menu-slogan"> 57 <div class="meta-menu"> 58 <?php wp_nav_menu( 59 array( 60 'theme_location' => 'contact', 61 'container' => false, 62 'items_wrap' => '<ul class="meta-menu-contact">%3$s</ul>' 63 ) 64 ); 65 ?> 66 <?php wp_nav_menu( 67 array( 68 'theme_location' => 'sub', 69 'container' => false, 70 'items_wrap' => '<ul class="meta-menu-sub">%3$s</ul>' 71 ) 72 ); 73 ?> 74 </div> 75 <div class="slogan"> 76 <img src="<?php echo get_template_directory_uri(); ?>/assets/img/slogan_main.svg" alt="100年のときめき、MOLS"> 77 </div> 78 </div> 79 </div> 80 </div>

js

1// ヘッダー(クリック後) 2jQuery(function() { 3 jQuery(".gv-header-link").on("click", function () { 4 jQuery(this).toggleClass("gv-button-active"); 5 jQuery(".sitemap").toggleClass("sitemap-active"); 6 }); 7});

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

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

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

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

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

guest

回答1

0

自己解決

スクリプトを2回読み込んでいました。

投稿2020/11/29 01:34

Yu-tade-su

総合スコア5

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問