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が含まれるかどうかを判別しています。

サンプル

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

• カテゴリ―１
• カテゴリ―２
• カテゴリ―３

カテゴリ―＆サブカテゴリーを合わせて条件にしたいので、/（スラッシュ）をエスケープすべく\を入れて、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/)とする。