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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby

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

Ruby on Rails

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

Slim

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

Bootstrap

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

CSS

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

Q&A

解決済

2回答

7320閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Ruby

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

Ruby on Rails

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

Slim

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

Bootstrap

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

CSS

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

0グッド

2クリップ

投稿2017/09/19 05:58

編集2017/09/19 07:51

#動的に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'}"

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

slim

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

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

slim

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

みたいにするとか

投稿2017/09/19 14:23

編集2017/09/19 14:27
t_tonchim

総合スコア96

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/09/19 22:01

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

0

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

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

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

投稿2017/09/19 07:08

編集2017/09/19 07:20
glvty83

総合スコア135

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/09/19 07:22

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

2017/09/19 07:36 編集

コントローラに設定はいらないはずです! > 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 07:52

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問