CODEWITHSUNDEEP
javascriptjquerycss
Rizwan Shahid
Rizwan Shahid

Reputation: 47

Highlight selected link on the same page

I'am searching for highlight selected link on the same page using css or javascript or jquery, found many solutions but they are not working according to my requirement. follwoing are requirement. Highlight the selected link or change its color etc.

<a href="#">First</a>
<a href="#">Second</a>
<a href="#">Third</a>

most of the people say to use

a:active{
 background-color:Red;
}
or 
a:visited{
 background:color:Red;
}

i know ative link is that which is currently active and visited link is that which you already visited. but they are not working in my case, i am loading the content of same page on click of these links. any idea how i can do this Thanks in advance

Upvotes: 0

Views: 4037

Answers (2)

Scott
Scott

Reputation: 21882

This is not valid code:

a:active{
background-color:Red;
}
or 
a:visited{
background:color:Red;
}

In addition, they both are trying to set the same color (although the visited link is coded wrong.)

Proper code would be:

a:visited, a:active{
background-color: red;
}

This will change any links which have been clicked to have a red background, as well as apply a red background to any link when it is in the processes of being clicked.

Upvotes: 1

Purag
Purag

Reputation: 17061

You can do this with inline Javascript, like this:

<a href="#" onclick="this.style.color='red'">Link</a>

You can also trigger a function on the link's click event all with jQuery:

$("a").click(function(){
    $(this).addClass("active");
    // define the styles for the active class for this to work
});

Upvotes: 1

Related Questions