「active_link_to」で表示中のページのリンクへ動的にclassを付与する方法
【結論】
・active_link_toとは、Railsのgemの一種。link_toと同じように、リンクを生成する「active_link_to」メソッドを利用できるようになる
・「active_link_to」メソッドは、リンク先のページを開いていると、リンクに「class=“active”」を付与する
・サイドバーをハイライトさせたり、リンクを無効化させる際に利用できる
【目次】
【本題】
サイドバーなどを制作する際、リンク先のページを開いている際には、該当リンクの背景色などを濃くしたりして、強調したい場合があります。
※参考例(Qiita)
Qiitaの場合、どの様にこれを実装しているのかデベロッパーツールで確認してみると、該当リンクに「p-home_menuItem-active」というクラスを付与している様です。
この様に動的にclassを付与したい場合、Railsでは「active_link_to」というgemを利用する方法があります。
「active_link_to」とは
「active_link_to」とは、Railsのgemの一種です。
これを導入すると、link_toと同じように、リンクを生成する「active_link_to」メソッドを利用できるようになります。
「active_link_to」メソッドでリンクを生成すると、リンク先を開いている時は、そのリンクに「class=“active”」を付与する事ができます。
後は、この「class=“active”」に対して、CSSを設定することで、リンクをハイライトさせたり、無効化させたりする事が可能となります。
実装方法
まずはgemを導入します。
gem 'active_link_to'
後は、link_toと同じ要領で、「active_link_to」を利用するだけで、動的にactiveクラスを付与できるリンクが生成されます。
active_link_to 'Users', '/users' # => <a href="/users" class="active">Users</a>
参考情報
GitHub - comfy/active_link_to: Rails view helper to manage "active" state of a link