发表新帖
发表新帖

Detect if a link has been clicked and apply a different CSS class if it has

前端 未结
关注
5 1817
轻奢々
轻奢々 2021-01-14 12:53

So what I want to do is determine if the current link is \'active\', i.e. if this link was just clicked by the user.

If it is, then I want to apply the class=s

相关标签:
5条回答
  • 悲&欢浪女
    2021-01-14 13:27

    I'm guessing that this is for something like a tabbed UI where you want the currently selected tab to look different?

    Try link_to_unless_current, then style the list items containing links differently from tabs containing plain text.

    0 讨论(0)
  • 别那么骄傲
    2021-01-14 13:28

    jQuery like this should work for you

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

    If you want this to work for a very specific set of links that add more to the selectors.

    For example let's say the ul has an id header

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

    then your jQuery should look like

    $(function(){
  $("#header a").click(function(){
    $("#header a").removeClass("selected")
    $(this).addClass("selected")
    return false;
  })
})
    0 讨论(0)
  • 再見小時候
    2021-01-14 13:32

    Bonkydog already gave you this hint in his comment, here it is as a working Sinatra example (using HAML instead of ERB though):

    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

    Edit: After a clarification in the comment, turns out that this seems to be pure HTML/CSS problem. Check out :target pseudo selector:

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

    Not sure whether some browsers support it though.

    0 讨论(0)
  • 北恋
    2021-01-14 13:34

    In current versions of CSS (Not sure if it's CSS 2.1 or CSS3), you should be able to do this:

    li:active { background-color: black; }

    However, CSS 2.1 doesn't specify whether li is active when it contains an active a element.

    To be more explicit, you could do this:

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

    This works in Chrome and Firefox current versions, but apparently not IE7 or IE9. There's no Ruby or JavaScript code required if you can live with that.

    In order to get this to work in IE, you'll likely need to trap an event using JavaScript, which is perhaps more than I have the patience to do, since active links tend to go away pretty fast, as you're generally navigating to a new page when :active becomes relevant. You'd probably bind an onclick event to li's that contain hyperlinks.

    Since you're asking how to do this in Ruby (specifically Sinatra), rather than Rails, the answer is going to depend on how you've structured your project, so it's hard to answer generally enough to be useful; the code will probably not be ruby-specific, other than the question about generating your HTML.

    0 讨论(0)
  • 谎友^
    2021-01-14 13:35

    I believe you want the :focus pseudo-class.

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

    Here's a jsfiddle: http://jsfiddle.net/jasper/xn7UW/

    0 讨论(0)
 看不清?
提交回复
热议问题