對於移動設備，將 target="_blank" 更改為 target = "_self"

Question

我正在嘗試這個代碼：

 if (window.matchMedia("(max-width: 767px)").matches) { // The viewport is less than 768 pixels wide document.getElementById("link").target = "_self"; }

 <a id="link" href="/something" target="_blank">Click Me</a>

但它僅適用於一個 ID。 我想使用一個類或 ID 將網頁中所有鏈接的target="_blank"轉換為target="_blank" target = "_self" 。

我該怎么做？

Answer 1

問題是 ID 是唯一的。 這意味着您只能擁有一個具有特定 ID 的元素。 您不能將此 ID 提供給另一個元素。 因此，您應該使用第二種方法：類

在此代碼中，您獲取具有特定類的所有元素，然后將其目標設置為_self 。

var tags = document.getElementsByClassName("className");
for(var i = 0; i < tags.length; i++) {
    tags[i].target = "_self";
}

HTML 示例：

<a class="className" href="/something" target="_blank">Click Me</a>

Answer 2

由於 id 必須是唯一的，我們可以使用document.querySelectorAll("a[id^=link]").target = "_self"

a[id^=link]將選擇所有帶有link的 id 統計信息的links(a)

演示

 if (window.matchMedia("(max-width: 767px)").matches) { // The viewport is less than 768 pixels wide document.querySelectorAll("a[id^=link]").target = "_self" }

 <a id="link" href="/something" target="_blank">Click Me</a> <a id="link2" href="/something" target="_blank">Click Me</a>