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

2017年8月1日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>
5. <ul>
6.     <li class="a">A</li>
7.     <li class="b">B</li>
8.     <li class="c">C</li>
9. </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

• A
• B
• C

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