CODEWITHSUNDEEP
jqueryhtmlcss
Prabhu
Prabhu

Reputation: 13335

How to programatically change a link's state to :active?

I have a link: 

<a id="link-50" href="#">MyLink</a>

I have some css defined for it's active state:

#link-50
{
  color:#eee;
}
#link-50:active
{
 color:#ddd;
}

I want to programatically change the color of link-50 to #ddd, i.e., I'm trying to change the link to go to it's active state. I thought calling the click() event would do that, but it doesn't seem to change the color.

I tried this:

#link-50.click();

Am I missing something?

Upvotes: 2

Views: 1314

Answers (3)

Bic
Bic

Reputation: 3134

Clicking the link will change it to active and then visited. Note, the active state is generally a mousedown state. Once the mouse if released, links go to visited, buttons are no longer active, etc. (see this Fiddle Example).

The best way to handle this would be to add a class to toggle on and off programmtically, which would apply the color:

$('#link-50').toggleClass('active'); // turn color on/off

See Fiddle.

Upvotes: 1

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Tried this?

$('#link-50').trigger('click');

http://api.jquery.com/trigger/ (Trigger jQuery)

Upvotes: 0

matewka
matewka

Reputation: 10158

You can't do it directly but you can use a class

#link-50:active, #link-50.active
{
    color:#ddd;
}

Then toggle it with jQuery

$('#link-50').click(function() {
    $(this).toggleClass('active');
    // or...
    $(this).addClass('active');
    // or...
    $(this).removeClass('active');
});

Upvotes: 4

Related Questions