How to change the color of clicked link using jquery - Stack Overflow

admin管理员组

文章数量:1302275

I have written jquery as following

   <script type="text/javascript">
     var jq = $.noConflict();
     jq(document).ready(function(){
     jq("a.tag-link").click(function(){
     jq(".selected").removeClass("selected");
     jq(this).addClass("selected");
    });
   });
  </script>

The html is something like

 <a href="home.html"class="tag-link selected" >home</a>
 <a href="about-us.html"class="tag-link" >about us</a>
 <a href="why-us.html"class="tag-link" >why-us</a>

In css a.selected{color:red;} Now my problem is that when I click on let us say about us link, its color get changed to red only when it is clicked. But after it gets redirected to about us page.Its color changes to default one. It does not turn to red. I want that the clicked link should be red color and others should be in default color.Please please help me...

I have written jquery as following

   <script type="text/javascript">
     var jq = $.noConflict();
     jq(document).ready(function(){
     jq("a.tag-link").click(function(){
     jq(".selected").removeClass("selected");
     jq(this).addClass("selected");
    });
   });
  </script>

The html is something like

 <a href="home.html"class="tag-link selected" >home</a>
 <a href="about-us.html"class="tag-link" >about us</a>
 <a href="why-us.html"class="tag-link" >why-us</a>

In css a.selected{color:red;} Now my problem is that when I click on let us say about us link, its color get changed to red only when it is clicked. But after it gets redirected to about us page.Its color changes to default one. It does not turn to red. I want that the clicked link should be red color and others should be in default color.Please please help me...

• jquery
• jquery-ui
• javascript

Share Follow asked Dec 5, 2012 at 8:13 NidaNida 1,70233 gold badges3636 silver badges7575 bronze badges 1

• HTML (and javascript) is somewhat stateless, it does'nt remember stuff from page to page, you'll have use hardcoded values for each page or some sort of storage, like localstorage or cookies. The answer below will work the first time the links are clicked, and once they are visited they will stay red, like forever! If that's what you're after, use CSS. – adeneo Commented Dec 5, 2012 at 8:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Drop the entire jQuery code, just use CSS:

a:visited {
    color:#FF0000; /* Or color:red; if you prefer not using the hex codes) */
}

The available selectors for the links are:

a:link {}
Defines the style for normal unvisited links.

a:visited {}
Defines the style for visited links.

a:active {}
Defines the style for active links.
A link bees active once you click on it.

a:hover {} Defines the style for hovered links.
A link is hovered when the mouse moves over it.

(Source)

Or, if you want this selection to persist when clicking a link, but not apply to all clicked links, use localStorage:

var jq = $.noConflict();
jq(document).ready(function(){
    if(localStorage.getItem("clickedLinkId")){ // If "clickedLinkClass" has been set.
        jq('#'+localStorage.getItem("clickedLinkId")).addClass("selected"); // add the class "Selected", to the previously clicked link.
    }
    jq("a.tag-link").click(function(){ // On click
        jq(".selected").removeClass("selected");
        jq(this).addClass("selected");
        localStorage.setItem("clickedLinkId", jq(this).attr("id")); // Save the class of the current element in the localStorage.
    });
});

HTML:

<a href="home.html"class="tag-link selected" id="home" >home</a>
<a href="about-us.html"class="tag-link" id="about" >about us</a>
<a href="why-us.html"class="tag-link" id="why" >why-us</a>

This should set the class of a previously clicked link, and store the clicked link in the localStorage.

Working Sample

You can do it by having a parameter reading function in next page,

In about-us.html page

<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
function getURLParameter(id) {
    return decodeURI(
        (RegExp(id + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}
$(document).ready(function () { 
    clickedUrl = getURLParameter('id');                 
    if(clickedUrl=='aboutus'){
        $(".selected").removeClass("selected");
        $('#aboutus').addClass("selected");
    }
});

</script>
<style type="text/css">
a.selected{color:red;}
</style>


<a id="home" href="home.html?id=home" class="tag-link selected" >home</a>
 <a id="aboutus" href="about-us.html?id=aboutus" class="tag-link" >about us</a>
 <a id="yus" href="why-us.html?id=yus" class="tag-link" >why-us</a>

If you just want a link to /home.html to be red when you are actually on /home.html but not otherwise, just parse the current url

var selectedLink = location.href.replace(/http:\/\/[^\/]+\//i,'/');
$('a[href="' + selectedLink + '"]').addClass('selected');

you just need to either make your link paths absolute, or change the replacement to chop off everything before the final slash like:

var selectedLink = location.href.replace(/http:\/\/.*\/([^\/]+)/i,"$1"); 

本文标签： How to change the color of clicked link using jqueryStack Overflow