Question

所以我想要做的是确定当前链接是否“有效”，即用户是否只是点击了此链接。

如果是，那么我想将class=selected应用于<li>项。

所以这就是我正在使用的：

<ul>
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
   <li><a href="#">Link 4</a></li>
   <li><a href="#">Link 5</a></li>
</ul>

如果选择了链接，我希望<li>看起来像这样：

<li class="selected"><a href="#">Link 1</a></li>

所以唯一的区别是，有一个类适用于它，而另一个没有。

我想在erb文件中执行此操作。所以Ruby会成为首选的语言......但是，它不是Rails（确切地说是Sinatra）。

感谢。

修改1

使用jQuery可能是必要的，这很好。

Answer 1

这样的jQuery应该适合你

$(function(){
  $("a").click(function(){
    $("a").removeClass("selected")
    $(this).addClass("selected")
    return false;
  })
})

如果您希望这适用于一组非常特定的链接，可以为选择器添加更多内容。

例如，假设ul有一个id标题

<ul id="header">
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
   <li><a href="#">Link 4</a></li>
   <li><a href="#">Link 5</a></li>
</ul>

然后你的jQuery应该看起来像

$(function(){
  $("#header a").click(function(){
    $("#header a").removeClass("selected")
    $(this).addClass("selected")
    return false;
  })
})

Answer 2

在CSS的当前版本中（不确定它是CSS 2.1还是CSS3），您应该可以这样做：

li:active { background-color: black; }

但是，CSS 2.1没有指定li在包含活动元素时是否处于活动状态。

更明确一点，你可以这样做：

li > a:active { background-color: pink; }

这适用于Chrome和Firefox当前版本，但显然不是IE7或IE9。如果您可以使用它，则不需要Ruby或JavaScript代码。

为了让它在IE中运行，您可能需要使用JavaScript捕获事件，这可能比我有耐心要做，因为活动链接往往会很快消失，就像你'通常在以下情况下导航到新页面：活动变得相关。您可能会将onclick事件绑定到包含超链接的li。

既然你在Ruby（特别是Sinatra）而不是Rails中询问如何做到这一点，那么答案将取决于你如何构建你的项目，所以很难回答得足够有用;除了关于生成HTML的问题之外，代码可能不是特定于ruby的。

Answer 3

我相信你想要:focus伪类。

a:focus {
    background-color : #000;
    color            : #fff;
}

这是一个jsfiddle：http://jsfiddle.net/jasper/xn7UW/

Answer 4

我猜这是像标签式用户界面，你希望当前选中的标签看起来不同？

尝试link_to_unless_current，然后将包含链接的列表项设置为与包含纯文本的标签不同。

Answer 5

Bonkydog已经在他的评论中给了你这个提示，这里它是一个有效的Sinatra例子（虽然使用HAML而不是ERB）：

require 'sinatra'
require 'haml'

get '/bar' do
  @urls = ['/foo', '/bar', '/baz']
  haml :index
end

__END__

@@ index
%ul
  -@urls.each do |url|
    %li{:class => request.path_info == url ? 'selected' : nil}
      %a{:href => url}
        =url

编辑：在评论中澄清后，结果证明这似乎是纯HTML / CSS问题。查看:target伪选择器：

<html>
  <head>
    <style>
li:target {
  background-color: #fcc;
}
    </style>
  </head>
  <body>
    <ul>
      <li id="foo"><a href='#foo'>foo</a></li>
      <li id="bar"><a href='#bar'>bar</a></li>
      <li id="baz"><a href='#baz'>baz</a></li>
    </ul>
  </body>
</html>

不确定某些浏览器是否支持它。

检测是否已单击链接并应用其他CSS类（如果已有）

5 个答案: