JavaScript

js ドロップダウンメニュー(複数)

<script> const hasChild = document.querySelectorAll('.menu-item-has-children'); const submenu = document.querySelectorAll('.sub-menu'); for (let i in hasChild) { if (hasChild[i]) { hasChild[i].addEventListener('mouseover', function() { submenu[i].…

jQuery タブ

html <ul class="tab_list"> <li class="active"><a href="#"></a></li> <li><a haref="#"></a></li> <li><a haref="#"></a></li> </ul> <div class="tab_content"> <div class="ac_content active"></div> <div class="ac_content"></div> <div class="ac_content"></div> </div> js function tab() …

jQuery 2回目以降のクリックイベントが効かない時

$('#navi li a').click(function() { $('html,body').animate({scrollTop:0}, 'fast'); }); ↑ この書き方だと2回目以降のクリックイベントが発生しない場合、下記のように記述します。 $(document).on('click', '#navi li a', function(){ $('html,body').a…

jQuery リンク先で指定タブを開く

html:リンク元 <a href="<?= get_page_link( 7 ) ?>#tab2">タブ2を開いて</a> html:リンク先 <ul class="tab_list"> <li class="active" data-tab="tab1"><a id="tab1">タブ1</a></li> <li data-tab="tab2"><a id="tab2">タブ2</a></li> </ul> <div class="tab_content"> <div class="ac_content active">タブ1コンテンツ</div> </div>

jQuery 特定の場所にhoverしたら、指定箇所に画像を表示させる

特定の場所をhover(click)したら、指定の箇所に画像を表示させる(下記の参考はワードプレス用になっていますが、htmlでも同じです。) html <p class="studio"> <a class="studio_map_img" href="<?php the_permalink(); ?>" data-img="<?php the_field('studio-floor_map'); ?>"></a> </p>

jQuery 領域外をクリックしてクラス削除

HTML <ul class="mainMenu"> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> CSS .mainMenu li.active{ color: red; } JQuery $(function(){ //Mainナビ $('.mainMenu li').click(function () { $('.mainMenu li').removeClass('active'); $(this).addClass('active'); }); }); $(document).on('click', function(e…

jQuery 多階層メニュー

https://b-moon.net/slide-down-and-aaccordion-menu/

スクロールすると途中で表示される「トップへ戻るボタン」

See the Pen スクロールすると途中で表示される「トップへ戻るボタン」 by seiko-takamori (@seiko-takamori) on CodePen.

html2canvas 【JavaScript】HTML要素を画像に変換&ダウンロードさせる方法

https://keymaso.com/programemory/javascript/html-to-image/ 上記を元に作成すると、画像のダウンロードが出来なかったのですが、サーバにアップしたら出来ました。 hinanaoblog.xyz ```<html lang="ja"><head> <title>テスト</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </meta></head></html>