如何使用 JavaScript 中的 href 值將 go 鏈接到鏈接？

Question

由於設計考慮，我不能在元素周圍放置 Anchor 標簽，但我可以向這些元素添加點擊事件。

如何正確點擊鏈接？

以前的代碼：

<a href="Page1.html">
   <button>Page 1</button>
</a>

新代碼：

<button onclick="document.location.href= 'Page1.html'">Page 1</button>

使用上面的代碼在本地測試我 go 來自：

file://directory/to/home.html

至

file://Page1.html

但該頁面位於同一目錄中：

file://directory/to/Page1.html

換句話說，我必須在不能使用錨標簽的情況下繼續，但盡我所能來表示它。

我應該添加帶有頁面位置的標題以顯示目標位置嗎？ 將鼠標懸停在鏈接上時，有沒有辦法模擬頁腳中顯示的位置？

Answer 1

請改用相對路徑：

<button onclick="document.location.href='./Page1.html'">Page 1</button>

更好的是，使用 Javascript 正確附加監聽器，因為內聯處理程序通常被認為是非常糟糕的做法，並且存在范圍和 escaping 問題：

document.querySelector('button').addEventListener('click', () => {
  window.location.href = './Page1.html';
});

您可以使用類似的語法向上導航，而無需一直返回根目錄。 例如

window.location.href = '../Page1.html';

運行時

file://directory/to/home.html

會帶你去

file://directory/home.html

Answer 2

在上述情況下，您應該添加當前目錄的路徑：

<button onclick="window.location.href='./Page1.html'">Page 1</button>

./Page%201 => 將帶你到file://directory/to/home.html

../Page%201 =>文件：//目錄/home.html

/Page%201 =>文件：//Page%201