使用 CSS 的简单“新”指示器

• 下载演示文件 - 1.05 Kb

引言

如果您曾经编写过留言板引擎，您可能希望为您的用户提供一种方法来判断自上次登录以来是否发布了新消息。除了这些新帖子，您还需要一个小的“新！”图像，以便您的用户可以快速识别新消息。理想情况下，一旦他们阅读了消息或回复，此图像就会消失。

背景

实现此结果的一种简单方法是简单地将任何比 X 天更新的内容称为“新”。这不需要对后端进行每个用户的登录（知道每个用户阅读了哪些消息）。但是，一旦用户阅读了新消息，它们对于该用户来说就不再是新的了，但是“新！”图标将继续显示。

在另一方面，您可以存储每个用户阅读了哪些消息，并在显示列表时使用它。但是，这需要在后端进行大量工作；对于一个“新！”图标的小结果来说，工作量太大了！

使用代码

本文中的技术介于上述两种极端情况之间。虽然它不会 100% 准确，但它也很容易实现。它使用了 HTML 锚点标签 <a> 的默认行为。

关键是此标签有两个伪类：a:link 和 a:visited，分别表示该链接从未被访问过和最近被访问过。它们可以在样式表中独立处理，如下所示，我在其中创建了一个名为 MsgAnchor 的通用类

<style>
.MsgAnchor { } 
.MsgAnchor A:visited 
{ 
   DISPLAY:none;
} 
.MsgAnchor A:link 
{ 
   BACKGROUND-COLOR: LightGreen 
   TEXT-DECORATION:none;
} 
</style>

现在，我可以在围绕 <a> 标签的元素上使用此 CSS 类，用户的浏览器将负责根据用户是否访问过该链接来确定使用哪个伪类。

这是基本的样式表信息——还没有什么新内容。诀窍在于您如何在构建消息列表中利用这些伪类。我将提供一个简单的消息列表示例，用户首先看到一个主题列表，可以单击主题以查看回复。我试图使这个示例简单，以演示本文的目的，而不是展示一个功能齐全的留言板。主页从数据库中提取消息并将其显示给用户。这是生成的 HTML 的结果

<table ID="Table1">
    <tr>
        <td><b>Topic</b></td>
        <td><b>Date Submitted</b></td>
        <td><b>Author</b></td>
    </tr>
    <tr>
        <td>
            <a href="CSSSampleDetails.html?ID=1&NumReplies=4">
                                 Building Robust ASP Pages</a>
            <span class="MsgAnchor">
               <a href="CSSSampleDetails.html?ID=1&NumReplies=4">New!</a>
            </span>
        </td>
        <td>7/19 09:56AM</td>
        <td>John Doe</td>
    </tr>
    <tr>
        <td>
            <a href="CSSSampleDetails.html?ID=2&NumReplies=2">
                                  Anyone seen this before?</a>
            <span class="MsgAnchor">
               <a href="CSSSampleDetails.html?ID=2&NumReplies=2">New!</a>
            </span>
        </td>
        <td>7/19 08:50AM</td>
        <td>Jimmy D.</td>
    </tr>
    <tr>
        <td>
            <a href="CSSSampleDetails.html?ID=3&NumReplies=15">
                                    Programming question...</a>
            <span class="MsgAnchor">
               <a href="CSSSampleDetails.html?ID=3&NumReplies=15">New!</a>
            </span>
        </td>
        <td>7/18 08:50AM</td>
        <td>Newbie L.</td>
    </tr>
</table>

CSS 类为 MsgAnchor 的 <span> 元素包含一个锚点标签。锚点标签的 HREF 包含此消息的回复数量：<a href= "CSSSampleDetails.html?ID= 2&NumReplies= 2">。请注意，消息主题链接的 HREF 是完全相同的 URL。

现在，当用户第一次看到此列表时，所有锚点标签都将未被访问，因此将使用 a:link 类。如果使用前面显示的 MsgAnchor 类，这意味着文本“新！”将以浅绿色显示，没有文本装饰。

然后用户单击其中一个消息链接以查看回复。这将导致相应的链接变为“已访问”，并且浏览器将在下次查看页面时使用 a:visited 类。用户返回到此页面，他们的浏览器使用 a:visited 类，该类具有 display:none。这具有隐藏“新！”文本的效果。

如果将新回复添加到主题中，锚点标签的 URL 将更改，从而使“新！”指示器重新可见。

关注点

请注意，此技术有以下几点缺点，但对于一个简单的解决方案，它有效。您不希望在“新！”非常重要时使用它来表示“新”含义。

此技术的问题

• 如果用户清除了他们的历史记录，所有项目将再次变为“新！”。
• 不同的浏览器可能会以不同的方式定义“已访问”并取消已访问的链接。
• 如果用户在不同的计算机上查看您的页面，则已访问的链接将不会跟随。