如何在rails和css上使用ruby添加下划线？

Question

我在轨道上使用ruby并且我对语言不是很熟悉.我想要做的是相当直接.我有一个语言切换栏,允许用户选择他们可以查看网站的语言.

我想在选择时强调选定的语言.但我不确定如何添加一个类或跨度,以便我可以强调(底部边框)其中一种语言.

这是我的代码:

<div class="language">
        <% if @language == :fr %>
            <%= link_to 'English', language_path(language: :en)  %>
            <span>|</span>
          French
      <% else %>
        English |
        <%= link_to 'French', language_path(language: :fr)  %>
      <% end %>
</div>

有人可以帮帮我吗？当我选择"语言"类时,它完全强调"英语|法语",当我真正想要的是强调当前选择的语言时.所以要么是,要么两者都不是.

Answer 1

将活动语言放入自己的范围并在那里设置样式

<div class="language">
    <% if @language == :fr %>
      <%= link_to 'English', language_path(language: :en)  %>
      <span>|</span>
      <span class="selected">French</span>
    <% else %>
      <span class="selected">English</span>
      <span>|</span>
      <%= link_to 'French', language_path(language: :fr)  %>
    <% end %>
</div>

CSS:

.language > .selected {
  text-decoration: underline;
}

您可能还需要为生成的锚标签设置样式text-decoration: none;,因为它们可能默认为下划线(无论如何都是好的做法).无论如何,请不要使用border-bottom此.

说了这么多,我认为你需要尽可能清楚地说明当前未选择的语言是锚标记.当人们看到下划线时,他们倾向于认为带下划线的东西是一个链接.相反,没有下划线链接的东西构成令人惊讶的行为.