gpt4 book ai didi

css - 如何使用 ruby​​ on rails 和 css 添加下划线?

转载 作者:太空宇宙 更新时间:2023-11-03 17:32:22 28 4
gpt4 key购买 nike

我正在使用 ruby​​ on rails,我对这种语言不是很熟悉。我想做的很简单。我有一个语言切换栏,允许用户选择他们可以使用的语言查看网站。

我想在选择语言时在所选语言下划线。但我不确定如何添加一个类或一个跨度,以便我可以只在其中一种语言下划线(下边框)。

这是我的代码:

<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>

有人可以帮帮我吗?当我选择“语言”类时,它会完全强调“英语|法语”,而我真正想要的只是强调当前选择的语言。所以要么,要么,不能两者兼而有之。

最佳答案

将事件语言放入它自己的范围内并在那里设置样式

<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;
}

您可能还需要将生成的 anchor 标记设置为具有 text-decoration: none; 的样式,因为默认情况下它们可能带有下划线(无论如何这是一种好的做法)。无论如何,不​​要为此使用 border-bottom

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

关于css - 如何使用 ruby​​ on rails 和 css 添加下划线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30581730/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com