jQueryで表示非表示する、でも.show()や.hide()は使わない

2017年9月17日

jQueryで要素の表示や非表示をコントロールする場合、手っ取り早い方法としては.show()、.hide()を使う方法があるけど、クラスを付与するほうが処理が速いので、今回はその方法を。

HTML

  1. <button id=”a”>A</button>
  2. <button id=”b”>A</button>
  3. <button id=”c”>A</button>
  4. <ul>
  5.     <li class=”a”>A</li>
  6.     <li class=”b”>B</li>
  7.     <li class=”c”>C</li>
  8. </ul>

CSS

  1. .is-hidden {
  2.     display: none!important;
  3. }

jQuery

  1. <script>
  2. $(function(){
  3.     $(‘.btn’).on(‘click’,function(){
  4.         var id = $(this).attr(‘id’);
  5.         $(‘.list’).removeClass(‘is-hidden’);
  6.         $(‘.’ + id).addClass(‘is-hidden’);
  7.     });
  8. });
  9. </script>

※!importantは元の要素の詳細度を無視するためにつけるといい

  • A
  • B
  • C

ボタンをおすと対応した要素が非表示になる。