如何設置樣式：<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;
}