homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Gold Sponsor 2015!
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Style image border when selected or clicked

Msg#: 4384879 posted 2:27 pm on Nov 8, 2011 (gmt 0)

Hi guys!

Can someone point me in the right direction with this one pls?

I am styling a carousel on jquery using jqCarouselLite, now when the image is "clicked" the border color will change. The problem is I can't do it even though I tried a:active and .current (using another jquery).

here is the js for current code

<script type="text/javascript" charset="utf-8">
jQuery(function() {
jQuery('.current a:active').each(function() {
var href = jQuery(this).find('a').attr('href');
if (href === window.location.pathname) {

I know I am calling the wrong css class or something.

its the only one I am stuck with, really appreciate it. Thanks!



WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4384879 posted 5:42 pm on Nov 8, 2011 (gmt 0)

I think you may misunderstand :active. Active is the state in which the mouse is down, on the link, but as soon as it's released it returns to :visited (I think, or maybe the page has to open first, in which case it's just :link, whatever.) The point is, it **appears** to do exactly what you're telling it to - remains active as long as the mouse is down.

So I am gathering you want the border to "stick" once clicked? For this I think you'll need a switch of some sort to "turn off" currently "active" classes. That is, click -> border sticks -> click something else you need to turn off the border on the first click. Something like this might do it. Basically you step through all the anchors, remove the "active" class for all except the one that has been clicked. Here's a working example to give you an idea, you should be able to switch instances of $ for jQuery (if you need it to resolve some conflict . . . .)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Click Test</title>
<style type="text/css">
#container { display: block; margin: 4em auto; width: 34em; text-align: center; }
#container li, #container li a { display: block; }
#container li { float: left; width: 6.25em; margin: 0 1em; padding: 0; background: #f5f5f5; }
#container li a { float: left; width: 6em; padding: 4em 0; }
.active-class { border: 6px solid #0000a0; }
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(function() {
$('#container a').click(function() { return swapBorder(this); });
function swapBorder(clickObject) {
var currentId=clickObject.id;
$('#container a').each(function() {
if ($(this).attr('id')==currentId) {
else { $(this).removeClass('active-class'); }
return false;
<ul id="container">
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="widgets">Widgets</a></li>
<li><a href="#" id="about">About</a></li>
<li><a href="#" id="contact">Contact</a></li>

Uuse your own jQuery version or method of inclusion (that's one I had on hand) and when you actually have links, remove the return false (unless you're using Jquery/JS to deliver.)

$('#container a').click(function() { swapBorder(this); }); // note return removed
else { $(this).removeClass('active-class'); }
//return false; Note commented out


Msg#: 4384879 posted 2:22 am on Nov 9, 2011 (gmt 0)


Thanks for the code! Unfortunately, it doesn't work. I know how a:active work, the thing that I need is how to style a current selected image on the slider. Active state works, but it disappears after the click.

Maybe a jquery that adds a style when clicked will do?


WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4384879 posted 4:53 pm on Nov 9, 2011 (gmt 0)

What doesn't work? The previous code was tested (did you point it to a valid jQuery library?) and shows you exactly how to

style a current selected image on the slider

The previous example styles the anchor, which is what you should do, but can be modified to style the image. The concepts are the same.


Msg#: 4384879 posted 12:54 am on Nov 10, 2011 (gmt 0)


I will try it again later tonight, thanks!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved