【jQuery】超簡単 ページごと scss切り替え

目的

jQueryを使って、ページごとに装飾を変えます。

前提

jQueryを導入済

実装例

イメージとしてこんな感じができます。
ホーム画面ではフッターのホームアイコンが緑になり
ユーザー一覧では、ユーザーズアイコンが緑になります。
https://gyazo.com/1209de9920840478ec974d0f4cd33632

記述例

下記にjqueryの記述を書きます
ポイントは

var loc = location.pathname;

でそのページのパスを取得することです。
あとはシンプルなif文でページによって、クラスを与えます。

application.js

$(function(){
  var loc = location.pathname;
  if(loc == "/"){
    $("#HomeIcon").addClass("green")
  } else if (loc == "/users"){
    $("#UsersIcon").addClass("green")
  }

});

stylesheet.css

.green{
        color: green;
      }

index.html.erb

<footer class="Footer">

        <%= link_to  root_path , id: "HomeIcon"  do %>
          <i class="fas fa-home"></i>
        <% end %>

        <%= link_to  users_path , id: "UsersIcon"  do %>
          <i class="fas fa-users"></i>
        <% end %>

      </footer>

いかがでしょうか
簡単な理屈で装飾を加えることができるので、非常に便利です。

参考文献