ボタンクリック後遷移したページのclass名を変更したい

前提・実現したいこと

ボタンをクリックし、ページが再読み込みされる際にクリックしたボタンのクラス名を変更したいです。
ソート機能を作リたいのですがデザインで躓いてます。ボタンをクリックした際にjavascriptでクラス名を変更し、デザインを変更しようと考えたのですが、再読み込みされると変更したクラス名もリセットされてしまいデザインも元に戻ってしまいます。

何か良い方法はないでしょうか、、

ボタンクリック後、ページが再読み込みされてもクリックしたボタンが白くなるようにしたい↓

該当のソースコード

html
1<ul class="nav nav-tabs">
2  <li class="nav-link" id="test1"><a href="/shop" id="sort1">全てのマッサージ</a></li>
3  <li class="nav-link" id="test2"><a href="/shop" id="sort2">料金が安い順</a></li>
4  <li class="nav-link" id="test3"><a href="/shop" id="sort3">口コミが多い順</a></li>
5  <li class="nav-link" id="test4"><a href="/shop" id="sort4">口コミの評価が高い順</a></li>
6</ul>

javascript
1#料金が安い順をクリックしたときの処理
2#クラス名の nav-link → nav-link activeに変更するとボタンが白くなる
3
4$(function(){
5    $("#sort2").click(function(){
6        if($("#test2").attr("class")=="nav-link"){
7          console.log("ttt");
8        $("#test2").removeClass("nav-link").addClass("nav-link active");}
9    });
10});

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

neko_daisuki

2020/11/27 17:01

HTMLはrails(erb)で書いていますか？

jun3030

2020/11/28 11:14

回廊ありがとうございます！書いてます！

行動規範の内容に同意します

回答2件

リンクに/shop?order=priceのようなクエリ文字列を付加し、erbではparams[:order]でその値を取得します。

以下のような記述になります。

erb
1<ul class="nav nav-tabs">
2  <li class="nav-link <%= 'active' if params[:order].blank? %>">
3    <%= link_to_if params[:order].present?, "全てのマッサージ", "/shop" %>
4  </li>
5  <li class="nav-link <%= 'active' if params[:order] == "price" %>">
6    <%= link_to_if params[:order] != 'price', "料金が安い順", "/shop?order=price" %>
7  </li>
8  <li class="nav-link <%= 'active' if params[:order] == "comments_count" %>">
9    <%= link_to_if params[:order] != "comments_count", "口コミが多い順", "/shop?order=comments_count" %>
10  </li>
11  <li class="nav-link <%= 'active' if params[:order] == "rate" %>">
12    <%= link_to_if params[:order] != "rate", "口コミの評価が高い順", "/shop?order=rate" %>
13  </li>
14</ul>