【javascript】URLパラメータを使った表示の出し分け方法

同じページだけど表示を出し分けたいときの方法について紹介していきたいと思います。

たとえばパラメータにAがついていたらアイテム1を出してパラメータにBがついていたらアイテム2を出すといった場合です。

今回はページは同じでURLについているパラメータによって表示を出し分けます。

URLパラメータによって表示を分ける

html

<div class="wrap">
           <div class="menu">
                      <a href="./index.html">すべて</a>
                      <a href="./index.html?item01">アイテム1</a>
                      <a href="./index.html?item02">アイテム2</a>
           </div>  
           <div class="box">
                      <div id="item01">
                                  <p>アイテム1</p>
                                  <p>アイテム1</p>
                      </div>
                      <div id="item02">
                                  <p>アイテム2</p>
                                  <p>アイテム2</p>
                      </div>             
           </div>  
</div>  

javascript

let para = location.search;
para = para.slice(1);
para = para.split('&');

if(para[0] == 'item01'){
           jQuery('.box > div:not("#item01")').hide();
           jQuery('.box > div#item01').show();

}else if(para[0] == 'item02'){
           jQuery('.box > div:not(#item02)').hide();
           jQuery('.box > div#item02').show();          
}

解説

ページを読み込んだときはURLはindex.htmlで「アイテム1」も「アイテム2」も表示されている状態になります。

上の3つあるリンクのうち「アイテム1」を押すと「index.html?item01」に飛びコンテンツ内の「アイテム2」は非表示になり 「アイテム1」のみ表示されます。

「アイテム2」の場合は「index.html?item02」に飛びコンテンツ内の「アイテム1」は非表示になり 「アイテム2」のみ表示されます。

サンプル