58
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

link_toにclass属性の書き方

Last updated at Posted at 2019-03-29

#はじめに

  • なぜこの投稿をするのか(背景)

    CSSを適用させる際に、link_toでのclass属性の書き方に思っていたより時間がかかってしまったから。

#実際に自分が試したコード

<!--これだとエラーにはならない-->
 <%= link_to("トピック作成", new_topic_path, {class: "nav-link"}) %>

<!--これでもエラーにはならない-->
 <%= link_to("マイページ", user_path(@current_user.id), {class: "nav-link"}) %>

<!--ポップアップ機能のある下の文ではエラーが発生してしまう-->
 <%= link_to("ログアウト", logout_path, method: :post, data:{confirm: "ログアウトしますか?"}, {class: "nav-link"}) %>

#原因と改善後
link_toにdata-***やclassなど追加属性を入れる場合、追加属性全体を1つのハッシュで書かないといけないが、それが出来ていなかった。

<!-- 1つのハッシュにしたバージョン -->
<%= link_to("ログアウト", logout_path, { method: :post, data: {confirm: "ログアウトしますか?"}, class: "nav-link"}) %>

<!-- Bare hashバージョン -->
<%= link_to("ログアウト", logout_path, method: :post, data: {confirm: "ログアウトしますか?"}, class: "nav-link") %>

#最後に
こういった細かな点をもっともっと詰めていかないと行けないなと思った。

58
44
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
58
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?