如何使用jquery更改点击链接的颜色答案

【问题标题】：How to change the color of clicked link using jquery如何使用jquery更改点击链接的颜色
【发布时间】：2012-12-05 17:10:17
【问题描述】：

我已经写了如下的jquery

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

html 类似于

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

在css中a.selected{color:red;} 现在我的问题是，当我点击让我们说一下我们的链接时，它的颜色只有在点击时才会变为红色。但是在它被重定向到关于我们的页面之后。它的颜色变为默认颜色。它不会变成红色。我希望点击的链接应该是红色的，其他的应该是默认颜色。请帮助我...

【问题讨论】：

HTML（和 javascript）有点无状态，它不记得页面之间的内容，您将为每个页面或某种存储使用硬编码值，如 localstorage 或 cookie。第一次单击链接时，下面的答案将起作用，一旦访问它们，它们将保持红色，就像永远一样！如果这就是您所追求的，请使用 CSS。

标签： jquery jquery-ui javascript

【解决方案1】：

删除整个 jQuery 代码，只使用 CSS：

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

链接的可用选择器是：

a:link {}
定义普通未访问链接的样式。

a:visited {}
定义访问链接的样式。

a:active {}
定义活动链接的样式。
单击链接后，链接将变为活动状态。

a:hover {} 定义悬停链接的样式。
当鼠标移到链接上时，链接会悬停。

(Source)

或者，如果您希望此选择在单击链接时保持不变，但不适用于所有单击的链接，请使用 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>

这应该设置之前点击的链接的类，并将点击的链接存储在localStorage中。

Working Sample

【讨论】：

感谢您的回复。但是上面的代码会改变所有访问链接的颜色，我只想要一个链接，即选择的一个应该是红色，其余的应该是默认颜色。
在这种情况下，您将不得不使用localStorage、cookies 或传递参数之类的东西。
你能指导我如何使用cookies、localStorage...等
另外，如果是，请考虑marking this as your answer。
我在文件中添加了上面的本地存储代码。它不炒锅。请多解释一下。

【解决方案2】：

你可以通过下一页的参数读取功能来做到这一点，

在 about-us.html 页面中

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

【讨论】：

没想到@Cerbrus，假设它不在问题上，但你问的是一件好事，因为参数会在书签中。
我的观点完全正确。根据用户的需求，这可能是此答案的强项或弱点... +1 无论如何。
你是正确的@Cerbrus，如果我找到解决方法来克服这部分问题，请在此处发布。

【解决方案3】：

如果您只是希望 /home.html 的链接在您实际位于 /home.html 时显示为红色，而不是其他情况，则只需解析当前 url

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

您只需要将链接路径设为绝对路径，或者更改替换以在最后一个斜杠之前切断所有内容，例如：

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

【讨论】：