【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>
いかがでしょうか
簡単な理屈で装飾を加えることができるので、非常に便利です。
参考文献
Author And Source
この問題について(【jQuery】超簡単 ページごと scss切り替え), 我々は、より多くの情報をここで見つけました https://qiita.com/ohnitakahiro/items/cf480a3acbf433f144d4著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .