特定のページを表示させているときのみクラスを付与する

jQueryのclickイベントで実現。
かなり原始的なやり方なので、オススメはしない。

○実装の背景
以下のコードのように、サイドバーのメニュー項目として「テスト〜テスト4」まで存在している。
各項目をクリックし、そのページを表示させている時のみ、liタグにpanel-headingとは別にもう一つclickedクラスを付与したい。
current_page?メソッドで実装できそうだが、うまくいかなかったため、この方法で試した。

sample.erb

<!-- サイドバー -->
<aside class="main-sidebar">
      <section class="sidebar">
        <ul class="sidebar-menu">
          <li class="panel-heading"> 
            <%= link_to 'テスト', hogehoge_path, remote: true, class: "block_modal" %>
          </li>
          <li class="panel-heading2">
            <%= link_to 'テスト2', hogehoge_path2, remote: true, class: "block_modal" %>
          </li>
          <li class="panel-heading3">
            <%= link_to 'テスト3', hogehoge_path3, remote: true, class: "block_modal" %>
          </li>
          <li class="panel-heading4">
            <%= link_to 'テスト4', hogehoge_path4, remote: true, class: "block_modal" %>
          </li>
        </ul>
      </section>
    </aside><!-- サイドバー終わり -->

sample.js

// サイドバー クリックで現在ページにのみ、クラス付与
$(function(){

$(".sidebar-menu li.panel-heading").click(function(){
  if(!$(this).hasClass("clicked")){
    $(this).addClass("clicked");
  }
  $('.sidebar-menu li.panel-heading2').removeClass('clicked');
  $('.sidebar-menu li.panel-heading3').removeClass('clicked');
  $('.sidebar-menu li.panel-heading4').removeClass('clicked');
});

$(".sidebar-menu li.panel-heading2").click(function(){
  if(!$(this).hasClass("clicked")) {
    $(this).addClass("clicked");
  }
  $('.sidebar-menu li.panel-heading').removeClass('clicked');
  $('.sidebar-menu li.panel-heading3').removeClass('clicked');
  $('.sidebar-menu li.panel-heading4').removeClass('clicked');
});

$(".sidebar-menu li.panel-heading3").click(function(){
  if(!$(this).hasClass("clicked")) {
    $(this).addClass("clicked");
  }
  $('.sidebar-menu li.panel-heading').removeClass('clicked');
  $('.sidebar-menu li.panel-heading2').removeClass('clicked');
  $('.sidebar-menu li.panel-heading4').removeClass('clicked');
});

$(".sidebar-menu li.panel-heading4").click(function(){
  if(!$(this).hasClass("clicked")) {
    $(this).addClass("clicked");
  }
  $('.sidebar-menu li.panel-heading').removeClass('clicked');
  $('.sidebar-menu li.panel-heading2').removeClass('clicked');
  $('.sidebar-menu li.panel-heading3').removeClass('clicked');
});

});

サイドバーの各メニュー項目をクリックすると、clickedクラスを持っていなければ、clickedを付与。
それと同時に、クリックしたメニュー項目以外の項目にclickedクラスが付与されていれば、解除する。
これで、常にクリックした項目にのみclickedクラスを付与できる。

このclickedクラスを用いてcssで指定すれば、特定のページを開いている時のみ、文字色や背景色など変えられる。