如何设置样式：<a>使用 React 的 onClick="" 而不是 href="" 的已访问元素？</a>

Question

• 该网站有一张桌子。
• 在表中，我从 Firestore 获取数据（并将这些数据显示给用户）。 表格中的某些单元格可能会链接到网站上的其他页面（这些页面也以表格形式实现）。

由于信息量很大，用户可能会混淆他们关注了哪些链接，哪些链接没有触及； 因此，当悬停在用户已经访问过的链接上时，我想用不同的颜色进行标记。

默认情况下，我的链接颜色为黑色，如果您在链接上使用 hover，它会亮起蓝色。 我希望用户访问的链接以不同的颜色突出显示。

以下是我如何编写路线的示例

export default function DeviceCell({ device }) {
    const router = useNavigate()

    return (
        <TableRow>
          
            <TableCell>
                <a className="page-links" onClick={() => router(device.id)}>List of users</a>
            </TableCell>
        </TableRow>
    );
}

还有我的.css 文件

.page-links {
    color: #3A3A3F;
    text-decoration: none;
    border-bottom: 1px black solid;
    border-bottom-width: 2px;
    cursor: pointer;   
}
    
.page-links:hover {
   color: #485FED;
   border-bottom: 1px #485FED solid;
   border-bottom-width: 2px;
}

Answer 1

a.page-links:visited:hover { color: red;} 应该可以。

Answer 2

有没有可能只是订购？

a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后才能生效。

.page-links{
    text-decoration: none;
    border-bottom: 1px black solid;
    border-bottom-width: 2px;
    color: #3A3A3F;
    cursor: pointer;   
}

.page-links:visited { 
    color: red; 
} 

.page-links:hover{
    color: #485FED;
    border-bottom: 1px #485FED solid;
    border-bottom-width: 2px;
}

Answer 3

你的问题可以通过再关联一个 function 来解决，当用户点击链接时，它会改变链接的颜色

onclick = existing-function; changeColor() => {
    document.this.style.color = "color";}

使用分号分隔两个函数。

Answer 4

根据您所说的问题，有两种情况“单击链接并返回页面后，当您通过链接时 hover 仍然亮蓝色”

是否要将单击的链接保留在单个 session 中？

• 如果是这种情况，那么您需要将访问过的链接存储在浏览器上的某处，例如 cookies 或 localStorage 或 SessionStorage 并检查渲染列表。 如果存在更改 CSS 否则使用不同的。
• 您还需要对存储的列表大小进行逻辑处理。 它应该有多大以及可以在浏览器上存储多长时间（过期）

---

您希望访问过的链接在多个会话中持续存在吗？

• 如果是这种情况，那么您还需要服务器端的一些帮助。 您需要一种机制来将 state 存储在后端（存储可以是您的选择 - NoSql db、SQL db 等），然后在呈现列表时检查特定页面。
• 您需要一种机制来识别用户。 如果他们已登录，这很容易，您可以使用他们的用户 ID。 如果用户是匿名的，您可以创建一个 cookie 来识别用户，或者使用不同的机制来生成唯一的用户 ID。

希望这可以帮助

Answer 5

如果我们想使用:visited CSS 伪选择器，基本上我们必须创建浏览器历史记录，因为visited 伪选择器依赖于它。 无需使用 HTML 锚元素创建真正导航的方法是History API 。 为了解决这个问题，我们必须在链接中添加符号 href 以推送历史状态并防止默认的 HTML 链接导航事件行为。

可以在此代码沙箱和沙箱预览中找到适当的示例

export default function DeviceCell({ device }) {
const router = useNavigate()
const handleClick = (e) => { 
   // Prevent default HTML Anchor Event
   e.preventDefault();
   window.history.pushState({ data: device.id }, `Data: ${device.id}`, e.target.href);
}
return (
    <TableRow>
      
        <TableCell>
            <a href={`/user/${device.id}`} className="page-links" onClick={() => router(device.id)}>List of users</a>
        </TableCell>
    </TableRow>
)}

CSS：

a.page-links:hover:visited {
  background-color: #dc2626;
  color: white;
}