Question

我需要一个破解来允许：访问仅在点击的锚链接上设置为紫色。

它适用于IE，但不适用于Firefox或Chrome。

在Firefox中试用：

<!DOCTYPE html>
<html>

<head>
<style>
a {color: blue;}
a:visited {color:purple;}
</style>
</head>

<body>
<p><b><a href="#" target="_blank">Link One</a></b></p>
<p><b><a href="#" target="_blank">Link Two</a></b></p>
</body>

</html>

问题：单击“链接一”时，只有“链接一”应该变成紫色或访问过。 Link Two应保持蓝色。

尝试了许多改变没有任何帮助，请避免爱/恨秩序和不必要的回复。

提前致谢。：）

修改：请检查href，这是应用处理和执行 onclick

的操作的方式

Answer 1

没有简单的方法可以做到这一点。链接的访问状态由其链接的URL和浏览器历史记录确定。

我能想到的唯一工作就是：

为每个链接指定一个标识符
将JavaScript事件处理程序绑定到每个链接，该链接设置包含所点击链接的ID的cookie
当页面加载时，检查是否存在所述cookie并向具有匹配ID的元素添加类。
在属于该类成员的元素上而不是在:visited上设置紫色。

Answer 2

这是因为您的链接都指向同一页面。浏览器会跟踪您访问的页面，而不是您点击的链接。

由于显示访问过或未访问过的链接在很大程度上取决于浏览器历史记录，这意味着它还取决于用户将使用哪个浏览器，因此最好使用Cookie跟踪访问过的链接。

<!DOCTYPE html>
<html>

<head>
<style>
a {color: blue;}
a.visited {color:purple;}
</style>
</head>

<body>

<p><b><a href="http://www.yahoo.com" target="_blank">Yahoo</a></b></p>
<p><b><a href="http://www.google.com" target="_blank">Google</a></b></p>
<p><b><a href="http://www.msn.com" target="_blank">MSN</a></b></p>
<p><b><a href="http://www.facebook.com" target="_blank">Facebook</a></b></p>
<p><b><a href="http://www.gmail.com" target="_blank">Twitter</a></b></p>

<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script>
$(document).ready(function(){

    $("a").click(function(){
        $.cookie($(this).attr('href'),'visited');
        markAllVisitedLinks();
    });

    markAllVisitedLinks=function(){
        $("a.visited").removeClass("visited");
        $("a").each(function(){
            if($.cookie($(this).attr('href'))=='visited')
            {
                $(this).addClass("visited");
            }
        });
    }

    markAllVisitedLinks();

});
</script>

</body>

</html>

jquery.cookie.js插件位于https://github.com/carhartl/jquery-cookie

Answer 3

就像其他人说过的那样，因为你的两个链接都有相同的＆＃39; href＆＃39;属性值。这使浏览器将其视为相同的链接。因此，如果您单击链接1，浏览器将其视为链接1，链接2已被访问。如果您将其更改为具有不同的＆＃39; href＆＃39;应该解决问题的属性值。

<!DOCTYPE html>
<html>

<head>
<style>
a {color: blue;}
a:visited {color:purple;}
</style>
</head>

<body>
<p><b><a href="default.asp" target="_blank">Link One</a></b></p>
<p><b><a href="default2.asp" target="_blank">Link Two</a></b></p>
</body>

</html>

为何锚（

3 个答案: