ruby-on-rails Rails link_to:单击但停留在原地,不跳到页面顶部

hivapdat  于 12个月前  发布在  Ruby
关注(0)|答案(4)|浏览(95)

我在rails应用程序中有一个link_to,它的功能是作为一个工具提示。当用户将鼠标悬停在链接上时:它显示一些帮助文本。
如果用户不小心点击了工具提示:我不想跳到页面顶部的默认行为。我知道用JavaScript我可以preventDefault,但是有没有一个简单的rails方法来获得同样的行为?
我想到了remote: true,但它仍然跳到页面的顶部。
代码:

<%= link_to "#", title: 'my helper text', remote: true do %>
  <i class="fa fa-question-circle"></i>
<% end %>

字符串

rslzwgfq

rslzwgfq1#

使用空的锚将导致滚动到文档开始,正如您所经历的那样。但是,如果使用不存在的锚,则不会导致滚动位置发生变化。例如:

<a href="#doesnotexist">Stay Here</a>

字符串
不过,这仍然会更改文档URL和浏览器历史记录,这是一种更糟糕的用户体验。
对于那些不应该改变页面的链接,比如那些通过JS处理的链接,你绝对应该使用渐进式增强,并使用最合适的方法(例如,return falsee.preventDefault)阻止JS中的浏览器操作。
如果您的工具提示实际上不应该链接到任何地方,那么最好将它们更改为另一个内联元素,例如span

ergxz8rk

ergxz8rk2#

在这种情况下,我通常都能成功地使用nil

<%= link_to nil, title: 'my helper text' %>
  <i class="fa fa-question-circle"></i>
<% end %>

字符串
经过一些研究,我看到一些人声称应该使用javascript:;,但我在使用nil时没有遇到任何问题。

cotxawn7

cotxawn73#

除非你需要一个真正的链接,否则不要使用锚元素。使用合适的HTML元素。在这种情况下,你应该使用span元素。
你应该能够做到这一点:

<span data-toggle="tooltip" data-html="true" title="<%= my_helper_text%>”><span class="fa fa-question-circle"></span></span>

字符串
或者甚至是这个:

<span data-toggle="tooltip" data-html="true" title="my helper text" class="fa fa-question-circle"></span>

7vhp5slm

7vhp5slm4#

我最终使用了一个<a>标记沿着与onclick="return false;"作为建议,在这个答案:

<a onclick="return false;" data-toggle="tooltip" data-html="true" title="<%= my_helper_text%>”><i class="fa fa-question-circle"></i></a>

字符串

相关问题