選択してたタブの色を変更し、飛んだページ先でも固定

Question

###実現したいこと
バーにあるアイコンを選択すると、そのページに飛ぶのだが、飛んだページ先で選択したアイコンの色を変更させたい。
下記のサイトを参考にしました。
https://teratail.com/questions/43177
上記のサイトでは、タブをクリックするとページ内でセクションに飛ぶという仕様だったため可能かとは思いますが、今回のページを更新する仕様では、クリックして変更した色が、ページ更新した瞬間に元に色に戻ってしまいます。
クリックした変色した色のまま、次のページ先でも固定させたいです。

###コード

<ul class="header-menus">
          <li>
            <%= link_to "/posts/new", :method => :get do %>
            <i class="fa fa-plus header-icon-size"></i>New<% end %>
          </li>
          <li>
            <%= link_to "/posts/index", :method => :get do %>
            <i class="fas fa-list header-icon-size">リスト</i><% end %>
          </li>
          <li>
            <%= link_to "/users/index", :method => :get do %>
            <i class="fa fa-users header-icon-size"></i>ユーザー<% end %>
          </li>
</ul>
          

.header-menus a {
  font-size: 16px;
  color: white;
  transition: all 0.5s;
}
.header-menus a.current{
  color: red;
  background:#FDF9F7;
}

$(document).ready(function(){
  $('.header-menus a').click(function(){
    $(this).addClass("current");
  })
})

お分かりの方、ぜひ宜しくお願い致します。

Answer 1

方法は２つあります。
１）JSでclassをつけるのではなく、controllerから呼ばれた時にviewの処理でつけます。
例えば /posts/new　から書き出すときは
<%= link_to "/posts/new", class="current" do %>
となるようにする。

２）link_to_unless_current をつかう。するとcurrentページは <a> でなくなるので、.header-menus a の時にred する

追記
全部にそう書いたら全部そうなります。/posts/new　から来た時だけ

• link_to "/posts/new"　に　classをつけ、以外にはつけない

様にするのです。
いくつか方法は有ります。一般的にはcontollerからどのlinkにどのclassをつけるか、の情報を渡すのですが、今回は元のアクションが違うのでそれを使う例を
<%= link_to "/posts/new", class=(action_name == 'new' ? 'current' : '') do %>

Comments

[tomtom1]

ご回答ありがとうございます！

１）JSでclassをつけるのではなく、controllerから呼ばれた時にviewの処理でつけます。
→<%= link_to("/posts/new", class: "current") do %>のように記述しました。
　こちらのバーはapplication/html.erbに記載のため、他の2つのリンクにもクラスをつけたところ、
　全てのアイコンがredになってしまいました。
　各Pageで、現ページのリンクにclassをつけるということでしたでしょうか？
　application/html/erbで良い方法はございますでしょうか？

２）link_to_unless_current をつかう。
→概念は理解致しました。しかし、全てのリンクをlink_to_unless_currentに変更したところ、
　リンクがうまく行きません。link_to_unless_currentについては、少しお時間ください。

[tomtom1]

追記ありがとうございます！！
<%= link_to "/posts/new", class=(action_name == 'new' ? 'current' : '') do %>
目に鱗でした。このような方法もあるのですね。本当勉強になります。
ちなみに、バーに"/users/index"と"/posts/index"のaction indexが二つある場合は可能ですか？
action_name == 'post/index'という風に書くしか思いつかず、もちろんそれでは叶いませんでしたが..。
また、controller_name を取り入れても、他のページアイコンがredになってしまいできませんでした。

[winterboum]

それはだめです。
そのような場合は link_to_unless_current を使うか、
controllerから「どのTABにclassをつけるかを @変数で渡す」などして処理します

[tomtom1]

少し質問逸れるかもしれませんが.. どちらかのindexというアクション名を、indexsとかに、routesやcontrollerで変更してしてしまえばもっと楽なのかなと思ったのですが、
index、show,new...などの基本的なアクション名から変更するのは、何か問題は発生しますでしょうか？

[winterboum]

それもありですが、TABを楽にするためだけに、でしたら薦めません。
「indexと違う命名？！　何が違うんだろう」と余分な思考が必要になります。
そういう手法では対応できないこともあるでしょうから、王道での実現を練習しておくことをお薦め

[tomtom1]

時間がかかって申し訳ありません！自分で色々と試しており時間がかかってしまいました。
ありがとうございます、なるべく命名を基本のまま進めたいと思います。
１. link_to_unless_currentでは、リンクに飛ばない&アイコンではなく"/users/index"が表示されるため、×。
２. controllerからどのTABにclassをつけるかを @変数で渡す→Controller内の定義で、viewにある要素にクラスを加えれるということでしょうか？調べてもそのような情報が出てきません..。よろしければお教えください。
３. 下記のようにif文を活用できる場合、xxxxxはどのようになりますか？
<% if xxxxx %>　←（もし表示ページがこちらのリンク先（current）と合致する場合という定義）
<i class="fa fa-users header-icon-size 色が入るクラス"></i>ユーザー<% end %>
<% else %>
<i class="fa fa-users header-icon-size"></i>ユーザー<% end %>
<% end %>

[winterboum]

＞１. link_to_unless_currentでは、リンクに飛ばない&アイコンではなく"/users/index"が表示されるため
それはきっと書き方をまちがえてます。　調べてみて

2. どうでも書けますが、、、
例えば post/index から来る場合
def index にて 　@link = "post/index としておいて
<%= link_to "/posts/index", class=(@link == 'post/index' ? 'current' : '') do %>

3. 2の様にしても良いし、
if current_page?(controller: 'post', action: 'index')

[tomtom1]

1. もう少し調べます！
2. application/html.erbに記述のバーのため、Controllerにある全アクションに変数を追加したいといけないため、まず3を挑戦したいと思います。
3. <% if current_page?(controller: 'post', action: 'index') %> という感じでよろしいですか？
　No route matches {:action=>"index", :controller=>"post"}のエラーが出てしまいます..。
　（ちなみに、routesに get 'users/index' => "users#index"はあります。）

[winterboum]

rails routes を見せてください

[tomtom1]

controllerは、　post → posts、 user→users　でした！そして、無事解決致しました。
解決しただけでなく、知らないことを多く知るきっかけとなり本当に勉強になりました、
ありがとうございます！