VS Code ユーザースペニット登録

VS code

ファイル → 基本設定 → ユーザースニペット

拡張子ごとに登録をしていきます。（例：scss) scss.json

"media query": {
    "prefix": "mq",
    "body": [
        "@include mq($1){",
        "\t$2",
        "}",
    ],
    "description": "メディアクエリポイントの設定"
},
  • prefix: 入力する短縮単語
  • body: 展開されるコード
  • $1 : 自分で入力できる箇所（最初にフォーカスが当たる箇所）
  • $2 : tabで移動してフォーカスが当たるところ
  • $3以降も同様にtabでフォーカス移動

「$」を文字として使いたい場合

\\$のように＄の前に＼＼を入れます。

※macでのバックスラッシュはoption + ¥

タブを挿入したい場合

\tで入れられる。整形したい時に便利

その他　ダブルコーテーションは\"

JSON でのエスケープ処理 (JSONの値に""", "\" を含める場合の処理) | iPentec

初期値を入れておきたい場合

${1:初期値}と入力すると値が入って展開される

下記のサイトを参考にさせていただきました！感謝します！！

haniwaman.com

jQuery タブ

JavaScript

html

<ul class="tab_list">
    <li class="active"><a href="#"></a></li>
    <li><a haref="#"></a></li>
    <li><a haref="#"></a></li>
</ul>

<!-- tab content -->
<div class="tab_content">
    <div class="ac_content active"></div>
    <div class="ac_content"></div>
    <div class="ac_content"></div>
</div>

js

function tab() {
  $('.tab_list li').click(function () {
    var num = $('.tab_list li').index(this);
    $('.ac_content').removeClass('active');
    $('.ac_content').eq(num).addClass('active');
    $('.tab_list li').removeClass('active');
    $(this).addClass('active');
  });
}

tab();

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

JavaScript 
$('#navi li a').click(function() {
    $('html,body').animate({scrollTop:0}, 'fast');
});

↑ この書き方だと２回目以降のクリックイベントが発生しない場合、下記のように記述します。

$(document).on('click', '#navi li a', function(){
    $('html,body').animate({scrollTop:0}, 'fast');
    console.log('aaa');
});

原因

原因はイベントハンドラが初回読み込み時のみに登録され、それ以降はイベントハンドラが登録されないことのようです。

解決方法

$(document).on('click', 'セレクタ', function(){
  /* イベント発火時の処理 */
});

$(document).onのように書くと、ウェブページ全体に対して、イベントハンドラを登録することで解決できそうです！

下記のサイトを参考にさせていただき、無事に問題解決できたので、本当に感謝です！

qiita.com

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

JavaScript

html:リンク元

<a href="<?= get_page_link( 7 ) ?>#tab2">タブ2を開いて</a>

html:リンク先

<ul class="tab_list">
  <li class="active" data-tab="tab1"><a id="tab1">タブ１</a></li>
  <li data-tab="tab2"><a id="tab2">タブ２</a></li>
</ul>

<div class="tab_content">
 <div class="ac_content active">タブ１コンテンツ</div>
 <div class="ac_content">タブ２コンテンツ</div>
</div>

jQuery

<script>
$(function () {

  // URL ページ内リンク取得
  let pram = location.hash;

  // URLのhashが＃tab2だったらタブ２を開く
  if( pram === '#tab2'){
    $('[data-tab="tab1"]').removeClass('active');
    $('[data-tab="tab2"]').addClass('active');
    $('.ac_content').toggleClass('active');
  }      

});
</script>

活用編

例えば、フォームなどをタブ切り替えで設置していた場合、確認ページも同じタブを開きたい。

html

<ul>
  <li class="active" data-tab="tab_1">
    <a id="tab_1">タブ１</a>
  </li>
  <li data-tab="tab_2">
    <a id="tab_2">タブ２</a>
  </li>
</ul>

<div>
  <div class="ac_content active">タブ１フォーム</div>           
  <div class="ac_content">タブ２フォーム</div>          
</div>

jQuery

１.aタグのhrefにid名が入るように指定する ２.hashを取得 ３.activeクラスを付与・削除

<script>
  // タブ２をクリックしたらタブ２のaタグにhrefを追加
  $('[data-tab="tab_2"]').click(function(){
    $('#tab_2').attr("href",'#tab_2');
  });

  // URL ページ内リンク取得
  let pram_recruit = location.hash;

  // URLハッシュがタブ２から来たらtab_2を開く
  if( pram_recruit === '#tab_2'){
    $('[data-tab="tab_1"]').removeClass('active');
    $('[data-tab="tab_2"]').addClass('active');
    $('.ac_content').toggleClass('active');
  }

</script>

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

JavaScript

特定の場所をhover（click）したら、指定の箇所に画像を表示させる（下記の参考はワードプレス用になっていますが、htmlでも同じです。）

html

<!--  ここにカーソルをhover-->
<p class="studio">
  <a class="studio_map_img" href="<?php the_permalink(); ?>" data-img="<?php the_field('studio-floor_map'); ?>"><?php the_title(); ?></a>
</p>  

<!--  ここに画像を排出-->
<img class="studio_main_img" src="http://localhost/sound_city/wp-content/uploads/2022/10/map_ed1.png" alt="">

jQuery

<script>
//   
$(".studio_map_img").hover(function(){

   $(".studio_main_img").attr("src",$(this).attr("data-img"))

});
</script>