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 {} 定义悬停链接的样式当鼠标移过它时，链接会悬停。

（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

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");

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

3 个答案: