HOME > jQuery > URLを使ってカテゴリ―で条件分岐する方法

URLを使ってカテゴリ―で条件分岐する方法

URLを使ってカテゴリ―で条件分岐する方法。.matchメソッドでURLと/categoryname01/を比較参照し、URLにcategoryname01が含まれるかどうかを判別しています。

静的サイトで、ヘッダーやサイドバー、フッターをside.htmlなどにして、phpでインクルードする場合がある。

今回は、side.htmlをインクルードしているサイトで、カテゴリーごとにサイドバーのリンクの表示内容を切り替えたかったので、URLにカテゴリーフォルダ名が含まれているか否かで条件分岐することにした。

オブジェクトや配列を使うともっとスッキリしたソースが書ける、、、と読んだけど、私にはそのコードが書けないので、今回はカテゴリーの分だけelse ifを繰り返し記述した。

$(function(){
       if(document.URL.match(/categoryname01/)) {
          $(".categoryname01").addClass("active");
       }else if(document.URL.match(/categoryname02/)) {
          $(".categoryname02").addClass("active");
       }
}); 

.matchメソッドでURLと/categoryname01/を比較参照し、URLにcategoryname01が含まれるかどうかを判別しています。

サンプル

カテゴリ―1の<li></li>にだけ、クラス名activeが入っています。

  • カテゴリ―1
  • カテゴリ―2
  • カテゴリ―3

カテゴリ―&サブカテゴリーを合わせて条件にしたいので、/(スラッシュ)をエスケープすべく\を入れて、lib_jquery\/url_cat_ifとした。

$(function(){
       if(document.URL.match(/lib_jquery\/url_cat_if/)) {
          $(".categoryname01").addClass("active");
       }else if(document.URL.match(/categoryname02/)) {
          $(".categoryname02").addClass("active");
       }
}); 

複数条件にしたいときは、.match(/hoge/ && /hoge2/)とか.match(/hoge/ || /hoge2/)とする。