【Ruby on Rails】link_toメソッドをリンクではなくボタンとして使う方法

2901 ワード

CSS HTML Rails Ruby Ruby テキストリンク

対象者

link_toメソッドの使い方を知りたい方

目的

link_toメソッド使ってviewでボタンを表示する

実際の手順と実例

1.link_toメソッドの表示の違い

a. 基本的な構文

<%=link_to　"表示する文字", "URL"　%>

上記の書き方だとテキストリンクになってしまう

b. doとendで囲う方法

<%=　link_to URL do %>
　　　表示する文字
<%　end　%>

これでボタン化できます。

2.　実際の使用例

下記サイトを参考に表示テキストがホバーすると変わるボタンを実装

上記記事のHTMLコードは下記の通り

index.html

<a href="#" class="btntextchange">
  <span>About</span><span>私たちについて</span>
</a>

※CSSは省略します。class="btntextchange"に表示を切り替えるcssのコードが書かれています。

これをRailsのコードに置き換えて実験してみた

index.html.erb

<a href="#" class="btntextchange">
  <span><%=link_to　"About", "about_path"　%></span>
  <span><%=link_to　"私達について", "about_path"　%></span>
</a>

上記の書き方だとボタン化できません。
原因としては、link_toメソッドを使用することでaタグのHTMLが作成され、二重に精製されてしまっていることが考えられます。

3.例の解決方法

下記のようにボタン化して解決できます。

index.html.erb

 <%= link_to about_path do %>
    <div class="btntextchange">
　　　　　　　　　　　　　<span>About</span>
　　　　　　　　　　　　　<span>私たちについて</span>
　　　　　　　　　</div>
 <% end %>

上記のようにHTMLコードを挟み込むことで、
ボタンとして活用できます！

参照

【Rails入門】link_toの使い方とオプションをわかりやすく解説！
【Rails基礎】link_toメソッドをボタン化して使う方法

Author And Source

この問題について(【Ruby on Rails】link_toメソッドをリンクではなくボタンとして使う方法), 我々は、より多くの情報をここで見つけました https://qiita.com/nao0725/items/e5fd4ff2e0a7abe21af0

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .

python作成正則

Pat(Advanced Level)Practice--1037(Magic Coupon)