如何仅在访问的最后一页上获取 a:visited 选择器？

Question

目前我最近在网站上查看的所有页面都已更改为我指定的颜色。我想要完成的是只让最后一个被查看的页面具有我分配的颜色。

谢谢！

Answer 1

我很无聊，所以我把它当作一个挑战。但是请记住，如果只是粘贴此示例，则它不会工作，因为它根本不是模块化的，并且这个有限的示例有一个缺陷，您需要手动刷新页面查看效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Last Visited Test</title>

    <style>
        /* What visited links should look like */
        .lastVisitedLink {
            color: purple;
            border: 1px groove black;
        }

        /* What all other links should look like */    
        a:not(.lastVisitedLink) {
            color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#a">Link 1</a></li>
        <li><a href="#b">Link 2</a></li>
        <li><a href="#c">Link 3</a></li>
        <li><a href="#d">Link 4</a></li>
    </ul>

    <script>
        var localStorageKey = 'lastVisitedLinkSave';

        var links = document.getElementsByTagName('a');

        //Since "links" is a nodeList, not an array
        Array.prototype.forEach.call(links, function(link) {
            var lastClicked = localStorage.getItem(localStorageKey);

            if (lastClicked === link.href) {
                link.className = 'lastVisitedLink';

            } else {
                link.className = '';
            }

            link.onclick = function(event) {
                event.preventDefault();

                localStorage.setItem(localStorageKey, this.href);

                this.className = 'lastVisitedLink';

                location.href = this.href;
            }
        });
    </script>
</body>
</html>

CSS class lastVisitedLink 定义了您想要访问的 link 的外观。 class 将添加到最后单击的 link。显然，在真实的网站中，这将在外部而不是内部定义。

这是关键部分：

//Find all anchor(link) tags
var links = document.getElementsByTagName('a');

//Using the prototype since "links" is a nodeList, not an array
//Here, we're going over all the links found on the page.
//For each link, we're checking if it's the last clicked link. If it is, add the CSS class to it to style it. If it's not the last clicked, remove all other classes associated with it.
Array.prototype.forEach.call(links, function(link) {
    var lastClicked = localStorage.getItem(localStorageKey);

    if (lastClicked === link.href) {
        link.className = 'lastVisitedLink';

    } else {
        link.className = '';
    }

    //Whenever a link is clicked, we save it as the last clicked link (to local storage), set the class name (same as above), then have the link change the page as usual.
    link.onclick = function(event) {
        event.preventDefault();

        localStorage.setItem(localStorageKey, this.href);

        this.className = 'lastVisitedLink';

        location.href = this.href;
    }
});

我只用了大约 5 分钟就写完了这篇文章，所以它远非完美。如评论中所述，这将删除 ALL 其他与 link 关联的 classes 如果 link 不是最后一次点击。如果你只想删除 lastClickedLink class，你将需要一个更复杂的解决方案，因为 AFAIK，vanilla JavaScript 没有简单的方法来做到这一点。

您还需要对 localStorage 有基本的了解才能正确使用它。这是一个方便的工具，可以将数据保存到客户端计算机。

如何仅在访问的最后一页上获取 a:visited 选择器？

How to get a:visited selector only on the last page that was visited?

html

css

dreamweaver