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

Question

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=selected to that <li> item.

So this is what I am working with:

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

If a link is selected, I want the <li> to look like this:

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

So the only differences is that one has a class applied to it, and the other doesn't.

I want to do this in an erb file. So Ruby would be the language of choice...although, it's not Rails (Sinatra to be exact).

Thanks.

Edit 1

Using jQuery might be necessary and that will be fine.

What does "just clicked" mean? Do you want Javascript? Do you mean "points to this page"? — SLaks, Nov 07 '11 at 23:17
Wouldn't it be simpler to just specify an a:active selector in your CSS? — JasonTrue, Nov 07 '11 at 23:21
@JasonTrue, yes I am looking for a solution that uses an `a:active` selector. What would the Ruby look like? Or would it not be Ruby? How would I do that in CSS, if I can? — marcamillion, Nov 07 '11 at 23:23
@SLaks what I mean if it has been assigned the `a:active` selector, like @JasonTrue pointed out. — marcamillion, Nov 07 '11 at 23:24
the :active pseudoclass is set _while the user is clicking on the link_. @marcamillion, is this what you want, or are you wanting to change the styling of the link after the user has arrived at the page it points to? — bonkydog, Nov 07 '11 at 23:39
@bonkydog yes, that is what I am looking for. Something like that. But it has to work on all major browsers, obviously. Is the `:active` pseudoclass widely supported? Think of it as I am creating some tabbed navigation that will be moving around based on the interactions with the user. As a user clicks on one link, the appearance should change according to the new class applied to it. — marcamillion, Nov 07 '11 at 23:45
a:active is supported since IE4 (that's where it started), and should be in most/all Firefox/Chrome versions. Some browsers may respond to li:active, but probably not older ones. Chrome accepted both `li:active { background-color: black; }` and `li > a:active { background-color: pink; }` FWIW. — JasonTrue, Nov 08 '11 at 00:13
@JasonTrue care to write out a full answer including a code example? — marcamillion, Nov 08 '11 at 00:17
Fair enough, since I've done more research now :P still don't have an IE-suitable solution that meets the exact request, though. — JasonTrue, Nov 08 '11 at 00:29
Am I right in my assumption that the `href`s will be fragments and not result in a trip back to the server if the user clicks on them? — Ian Eccles, Nov 08 '11 at 14:37
@Ian yes, you are right in that assumption. Basically it's dynamic Ruby powered navigation that I am building. — marcamillion, Nov 08 '11 at 20:23
Are you going to be firing a javascript event (or similar action) whenever a link is clicked in order to change content on the page? If so, within the click event function, just remove the class "selected" from all links in that `ul` (give the `ul` an ID to make the javascript DOM search quicker) and then add the class "selected" just to the clicked link (ex/ using `$(this).addClass('selected')` within the click event function with jQuery). — William, Nov 08 '11 at 21:50
@William looks like that's exactly what I am going to have to do. Thanks. — marcamillion, Nov 08 '11 at 23:34

score 7 · Accepted Answer · answered Nov 09 '11 at 00:32

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

score 2 · Answer 2 · answered Nov 08 '11 at 00:28

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.

The problem with this is that I still need to designate the `li` as 'active' for this solution to work. So it only gets me half-way there. Otherwise, it only applies it for the literal moment when I have clicked on the link, and once I release the mouse button, it removes the style - which is not the behavior I want. I want the user to click it, then like most navigation, other menu items appear and the parent menu item looks differently than how it did before it was pressed. — marcamillion, Nov 08 '11 at 01:10
Active is a pseudoclass that is automatically applied. Your phrasing implied that you wanted the same behavior as "active" links. If you want the impact to be more durable, then you generally would apply the class either with onclick, as in http://stackoverflow.com/questions/3566838/jquery-addclass-onclick , assuming the click action doesn't cause a different page to load, or if you just want do apply this class when the link matches the current page while you're first rendering the page, consider stealing from the behavior of rails current_page? method and using that to set the class. — JasonTrue, Nov 08 '11 at 02:09

score 0 · Answer 3 · answered Nov 07 '11 at 23:28

0

I believe you want the :focus pseudo-class.

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

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

answered Nov 07 '11 at 23:28

Jasper

75,717
14
151
146

This isn't as well supported as I believed, however I can't easily find what browsers support this pseudo-class. – Jasper Nov 07 '11 at 23:39
Yeh...seems so...because I tried it in Chrome (latest build) on OS X and it still didn't work. – marcamillion Nov 07 '11 at 23:43

score 0 · Answer 4 · answered Nov 07 '11 at 23:30

0

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.

answered Nov 07 '11 at 23:30

bonkydog

2,012
20
11

It is something like a tabbed UI? So I would literally have two sets of the `
` elements, one with the `class=selected` and the other without it? That hardly seems DRY to me. Can you show me some code to flesh out your example a bit. Thanks.

marcamillion

Nov 07 '11 at 23:36

By the way...that's to apply the style to the link...i.e. the `` not the `

` like I need. Or am I missing something? Remember the output should be `selected` class on the `li`.

– marcamillion Nov 07 '11 at 23:38

Mladen Jablanović · Answer 5 · 2011-11-08T21:58:57.077

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.

The issue with bonkydog's solution is there is no `request.path_info`, i.e. when a link is clicked, it's in the navigation so it just goes to a URL fragment and not HTTP request gets to sent to, and received from, the server. — marcamillion, Nov 08 '11 at 21:40

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

5 Answers5

Linked