如何使用 jQuery 向連結新增 target=”_blank” 屬性？

我們可以使用 jQuery 透過選擇器（例如類或 ID）選擇目標連結，然後使用 .attr() 方法新增 target 屬性並將其值設定為 "_blank" 來向連結新增 target 屬性。這將確保單擊連結時，連結會在新的標籤頁或視窗中開啟。

讓我們首先了解什麼是 jQuery。jQuery 是一個 JavaScript 庫，它簡化了 HTML 文件遍歷、事件處理和動畫。它允許輕鬆操作文件物件模型 (DOM)。

它還為常見的 JavaScript 任務（例如發出 AJAX 請求）提供了幾種簡寫方法。它廣泛用於 Web 開發中，以建立互動式和動態的使用者介面。它可以輕鬆地與其他庫和框架整合。

target=”_blank” 的含義是什麼？

target 屬性 "target='_blank'" 用於 HTML 連結中，以指定應在何處開啟連結的文件。

當 target 屬性設定為 "_blank" 時，連結的文件將在新的瀏覽器視窗或標籤頁中開啟。這意味著使用者不會離開當前頁面或丟失其當前瀏覽上下文，並且可以在檢視連結內容後輕鬆返回原始頁面。

當您希望在新標籤頁或視窗中開啟連結時，這非常有用，這樣使用者可以輕鬆地在當前頁面和連結頁面之間切換，而不會丟失其位置。

方法

您可以透過選擇連結並使用 .attr() 方法設定 target 屬性，使用 jQuery 向連結新增 target 屬性 "target='_blank'"。

這是一個示例：

$(document).ready(function(){
   $("a").attr("target", "_blank");
});

在這個示例中，指令碼選擇頁面上的所有 "a" 元素並將 target 屬性設定為 "_blank"。

您也可以使用 .prop() 方法代替 .attr() 方法，這在現代版本的 jQuery 中更高效且更推薦：

$(document).ready(function(){
   $("a").prop("target", "_blank");
});

您還可以使用更具體的選擇器來定位特定的連結。

例如，如果您只想向具有 "new-tab" 類的連結新增 target 屬性，可以使用以下程式碼：

$(document).ready(function(){
   $("a.new-tab").prop("target", "_blank");
});

示例

這是一個使用 jQuery 向特定連結組新增 target 屬性 "target='_blank'" 的完整工作示例：

<!DOCTYPE html>
<html>
<head>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
   <body>
      <a href="https://google.com" class="new-tab">Google</a>
      <a href="https://facebook.com">Facebook</a>
      <a href="https://twitter.com" class="new-tab">Twitter</a>
      <script>
         $(document).ready(function(){
            $("a.new-tab").prop("target", "_blank");
         });
      </script>
   </body>
</html>

解釋

在這個示例中，指令碼選擇頁面上所有具有 "new-tab" 類的 "a" 元素並將 target 屬性設定為 "_blank"。因此，當您單擊 "Google" 和 "Twitter" 連結時，它們將在新標籤頁中開啟，因為它們具有 new-tab 類，但是如果您單擊 Facebook 連結，它將在同一標籤頁中開啟。

更新於：2023年2月13日

7K+ 次瀏覽

啟動您的 職業生涯

完成課程獲得認證

開始學習
廣告