別ページから飛んで来たときに、表示を切り替えたい

Question

ボタンクリックでリストが並び変わるページを制作しています。
別ページから飛んで来たときに、表示を切り替えたいのですがどうすれば良いでしょうか?
(index.html指定なし飛んできた場合、全てを表示)
(index.html#redなど指定して飛んできた場合、赤を表示)
(index.html#greenなど指定して飛んできた場合、緑を表示)

何卒、ご教示いただきたいです。
宜しくお願い致します。

HTML

<ul class="btn-sortNav">
   <li id="btnAll" class="is-active">全て</li>
   <li id="btnRed">赤</li>
   <li id="btnGreen">緑</li>
</ul>
      
<div class="itemList"><ul>
  
<li class="red">赤</li>  
<li class="green">緑</li>
<li class="green">緑</li>
<li class="green">緑</li>
<li class="red">赤</li>  
<li class="green">緑</li>
<li class="green">緑</li>
<li class="red">赤</li>  

スクリプト

<script>
$(function(){
    $('.btn-sortNav li').each(function(){
        $(this).click(function(){
            var btnName = $(this).attr("id").substring(3).toLowerCase();
            var className = '.';
            className += btnName;
      if(btnName == 'all') {
        $('.itemList ul > li').fadeIn(200);
      } else {
        $('.itemList ul li:not(className)').hide();
        $(className).fadeIn(200);
      }
        });
    });
});
</script>

Comments

[m.ts10806]

Javaはどう関係するのでしょうか。
念のため指摘しておきますと、JavaとJavaScriptは全く別物です

[haruka0007]

コメントありがとうございます。
JavaとJavaScriptの違いも分からないまま手探りで作業しております...。
紛らわしい質問で申し訳ございません。

[m.ts10806]

質問は編集できますので適宜調整いただければと。

[haruka0007]

かしこまりました。

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

Answer 1

#btnRedなどになります。

    $(location.hash).trigger('click');

https://api.jquery.com/trigger/

                //$('.itemList ul li:not(className)').hide();
                $('.itemList ul li:not(' + className + ')').hide();

Comments

[haruka0007]

ありがとうございます。
私にはハードルが高すぎたようで、１からつくり直したいと思います。
ご回答ありがとうございました。

Answer 2

switch(location.hash) {
  case '#red':
    $('#btnRed').click();
  break;
  case '#green':
    $('#btnGreen').click();
  break;
}

こんな感じでどうでしょうか。

Comments

[kyoya0819]

MarkDown文法をご利用ください。

[haruka0007]

ありがとうございます。
私にはハードルが高すぎたようで、１からつくり直したいと思います。
ご回答ありがとうございました。