我有一个简单的导航菜单,其中包含针对不同页面的纯 html 链接。所有这些页面都共享这个菜单,该菜单被分成部分。

我希望当前页面的链接以粗体突出显示。我的(非工作)实现的通用版本如下所示:

# 'pagetwo' view 
<%= render :partial => "shared/nav" %> 
 
# partial 
<%= link_to "Home", home_url, :id => "home" %> 
<%= link_to "Page 1", pageone_url, :id => "pageone" %> 
<%= link_to "Page 2", pagetwo_url, :id => "pagetwo" %> 

我可以用 JavaScript 解决这个问题吗?

<小时 />

link_to_unless_current 建议似乎有效。有谁知道如何使用此方法为每个结果分配不同的 CSS 类?

请您参考如下方法:

除非您需要更改页面请求之间链接的粗体程度(即响应客户端事件),否则您可能会考虑使用 block 形式 link_to_unless_current或者,对于更通用的解决方案,请查看 current_page?

另一个选择可能是根据当前页面向正文(或类似的容器元素)添加类,然后编写 CSS 规则以定位特定上下文中的链接。例如:

body.home a#home_link { font-weight: bold } 
body.about a#about_link { font-weight: bold }  


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!