jQueryを使用して新しいタブでリンクを開く方法


  1. HTMLのリンク要素を用意します。例えば、下記のようなコードを使用します。

    <a href="https://example.com" class="new-tab-link">リンク</a>
  2. jQueryをHTMLに組み込みます。以下のコードをHTMLの<head>セクション内で使用します。

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  3. jQueryを使用してリンクをクリックした際に新しいタブでページを開く処理を追加します。以下のコードをHTMLの<script>タグ内で使用します。

    <script>
    $(document).ready(function() {
    $('.new-tab-link').click(function(event) {
      event.preventDefault(); // リンクのデフォルトの動作をキャンセルします
      window.open($(this).attr('href'), '_blank'); // 新しいタブでリンクを開きます
    });
    });
    </script>

上記のコードでは、new-tab-linkクラスを持つリンク要素がクリックされたときに、event.preventDefault()によってリンクのデフォルトの動作がキャンセルされます。そして、window.open()関数を使用して、リンクのhref属性の値を新しいタブで開きます。

これにより、ユーザーがリンクをクリックした際に新しいタブでページが開くようになります。この方法を使用すると、target="_blank"属性をリンク要素に追加する必要がなくなります。

以上が、jQueryを使用して新しいタブでリンクを開く方法の簡単な解説です。この方法を応用することで、他の要素や条件に基づいて新しいタブでページを開くことも可能です。