1

我写的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;} 现在我的问题是，当我点击让我们说一下我们的链接时，它的颜色只有在点击时才会变为红色。但是在它被重定向到关于我们页面之后。它的颜色变为默认颜色。它不会变成红色。我希望点击的链接应该是红色，其他应该是默认颜色。请帮助我...

4

3 回答 3

7

删除整个 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.

工作样本

于 2012-12-05T08:16:03.600 回答
1

您可以通过在下一页具有参数读取功能来做到这一点，

在 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>
于 2012-12-05T09:10:02.857 回答
0

如果您只是希望 /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");
于 2012-12-05T08:40:28.847 回答