如何使用jQuery更改单击链接的颜色

Question

我写了如下的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;}现在的问题是，当我单击“让我们谈论我们”链接时，仅当单击该链接时，其颜色才会变为红色。 但在将其重定向到关于我们的页面后，其颜色更改为默认值。 它不会变成红色。 我希望点击的链接应为红色，其他链接应为默认颜色。请帮助我...

Answer 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 {}定义悬停链接的样式。
当鼠标移到链接上时，链接将悬停。

（ 来源 ）

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

工作样本

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>

Answer 3

如果您只是希望/home.html上的链接实际为/home.html时为红色，否则，只需解析当前网址即可

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

您只需要使链接路径成为绝对路径，或更改替代路径以截断所有内容即可，例如：

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