質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • Ruby

    7893questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    7458questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • CSS

    5966questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Bootstrap

    998questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • Slim

    78questions

    SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

【Rails】ナビゲーションにて動的に.activeをlink_toに付与したい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 726
退会済みユーザー

退会済みユーザー

動的にactiveクラスをlink_toに付与したい

BootstrapのDashboardサイドバーみたく.activeクラスRailsで動的にlink_toに付与したい。
イメージ説明
表示ページのサイドバー項目はbackground青色になっています。

ul.nav.nav-pills.flex-column
 li.nav-item = link_to "action1"  ,action1_path ,class:'nav-link active' ← このactiveを動的にしたい。
 li.nav-item = link_to "action2"  ,action2_path  ,class:'nav-link'
 li.nav-item = link_to "action3"  ,action3_path  ,class:'nav-link'

こんな感じのコードだとすれば、どうすれば実装できるのでしょうか。
controllerを編集する必要があるのか、viewだけの編集で済むのか、
いまいちイメージができません。

ご教授いただける方、宜しくお願いします。

追伸1

params[:action]は使えませんか。
viewコントローラの各アクションを区別することはできませんか。

追伸2 サイドバーのコードはパーシャルです。

これを前提にお願いします。

追伸3

現状、正常に動く

- if controller.action_name == "show"
  li.nav-item = link_to "トップ"        ,[:user,:mypage]            ,class:'nav-link active'
- else
  li.nav-item = link_to "トップ"        ,[:user,:mypage]            ,class:'nav-link'


- if controller.action_name == "following"
  li.nav-item = link_to "フォロー"      ,[:following,:user,:mypage] ,class:'nav-link active'
- else
  li.nav-item = link_to "フォロー"      ,[:following,:user,:mypage] ,class:'nav-link'

- if controller.action_name == "clipping"
  li.nav-item = link_to "クリップ"      ,[:clipping,:user,:mypage]  ,class:'nav-link active'
- else
  li.nav-item = link_to "クリップ"      ,[:clipping,:user,:mypage]  ,class:'nav-link'

現状、正常に動かない

li.nav-item = link_to "トップ"        ,[:user,:mypage]            ,class:"nav-link #{ active if controller.action_name == 'show'}"

や

li.nav-item = link_to "トップ"        ,[:user,:mypage]            ,class:"nav-link #{ active if params[:action: == 'show'}"

どうもこれだと動きません...。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

li.nav-item = link_to "トップ"  ,[:user,:mypage]  ,class:"nav-link #{ active if controller.action_name == 'show'}"


これって・・・active'active'にしてやれば動きませんか?
もしくは

#{controller.action_name == 'show' ? 'active' : ''}

みたいにするとか

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/20 07:01

    TomoyukiTanakaさん、ズバリ的中でした!!
    コードが本当にスッキリしました!!ありがとうございます。

    キャンセル

+1

方法は色々あると思いますが
viewだけでもできます。
シンプルに

li.nav-item = link_to "action1"  ,action1_path ,class:"nav-link #{active if params[:hoge] == "〇〇(trueにできる値)" }"

みたいな感じでできると思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/19 16:22

    申し訳ございません。params[:hoge]のパラメータを用いるということは、
    コントローラの設定も必要ってことでしょうか。文法は分かるのですが、
    いまいちhogeの部分がわからず、コメントさせていただきました。
    params[:hoge]の[:hoge]は任意のパラメータってことでしょうか?

    キャンセル

  • 2017/09/19 16:33 編集

    コントローラに設定はいらないはずです!
    > params[:hoge]の[:hoge]は任意のパラメータってことでしょうか?
    そうですね。

    該当のviewに飛んできた時にparamsの中にそのページを特定できるparams[:hoge]が入っているはずですので、その値を取得する感じです。

    おそらく, params[:action]みたいな感じで判別できそうだと思いますが、念のため、
    pryで処理を止めて見て、どのparamsを受け取っているか確認して見ると良いと思います。

    Gemfileに
    ```
    gem "pry"
    ```
    を追加して、$ bundle install

    該当のviewファイルに
    ```
    - binding.pry ← ここを追加して、リロードしてください。これにより処理を止めてデバッグすることができます
    li.nav-item = link_to "action1" ,action1_path ,class:'nav-link active'
    li.nav-item = link_to "action2" ,action2_path ,class:'nav-link'
    li.nav-item = link_to "action3" ,action3_path ,class:'nav-link'
    ```

    リロードするとターミナルの中で処理が止まるので、そこで
    params
    とコマンドを入れてください。

    paramsの中身が入ってくるはずなので、その中から特定するのに使えそうな値を探して
    params[:hoge] == "true"になるようにしてみてください。

    キャンセル

  • 2017/09/19 16:52

    ありがとうございます!!
    pryを使ってパラメータを調べることはできましたが、
    うまくslimのコードに落とし込めませんでした。
    泥臭くifで分岐分けすると可能なのですが、
    クラスを動的に...ってなるとなぜか動きませんでした。難しいですね。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Ruby

    7893questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    7458questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • CSS

    5966questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Bootstrap

    998questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • Slim

    78questions

    SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。