JavaScript

jQueryでaタグのtarget属性を「_blank」に設定する手順:特定のリンク文字列を対象にする方法

  /

現代のウェブデザインとウェブ開発の領域では、一貫したユーザーエクスペリエンスを提供するためにさまざまな技術やツールが活用されています。特に、大規模なウェブサイトや複数のページを持つサイトでは、リンク属性を一斉に変更する必要が生じることがあります。
この記事では、jQueryの.attrメソッドを使用して、ページ内のaタグのtarget属性を一括で「_blank」に変更する方法を詳しく解説します。

Contents
  1. .attrメソッドを利用したJavaScriptの記述
  2. 実際のHTMLの例
  3. jQueryの.attrでページ内のリンク（URL）から指定文字列を含むaタグのtarget属性を「_blank」に変更するデモページ
  4. まとめ

.attrメソッドを利用したJavaScriptの記述

最初に、必要なjQueryライブラリをページにインクルードします。以下のコードは、GoogleのCDNからjQueryを読み込む例です。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

　
次に、jQueryを使用してページ内のリンクを操作するスクリプトを追加します。この例では、URLに「/category/」という文字列を含むaタグのtarget属性を「_blank」に設定しています。

<script type="text/javascript">
$(function(){
     $("a[href^='/category/']").attr("target","_blank");
});
</script>

　
このスクリプトのキーとなる部分は、セレクタ$(“a[href^=’/category/’]”)です。これにより、href属性が/category/で始まるすべてのaタグを選択します。そして、.attr(“target”,”_blank”)でそのターゲット属性を_blankに変更します。

実際のHTMLの例

以下は、変更対象となるaタグを含むサンプルのHTMLです。

<div class="clWrap">
    <h1>リンク（URL）から指定文字列を含むaタグのtarget属性を「_blank」に変更</h1>
 
<ul>
    <li class="cat-item cat-item-36"><a href="/category/css">css</a>
    </li>
    <li class="cat-item cat-item-2"><a href="/category/javascript">JavaScript</a>
    </li>
    <li class="cat-item cat-item-3"><a href="/category/jquery">jQuery</a>
    </li>
    <li class="cat-item cat-item-53"><a href="/category/php">PHP</a>
    </li>
</ul>
 
</div><!--/clWrap-->

jQueryの.attrでページ内のリンク（URL）から指定文字列を含むaタグのtarget属性を「_blank」に変更するデモページ

このテクニックを実際に体験したい場合は、以下のデモページを参照してください。

jQueryの.attrでページ内のリンク（URL）から指定文字列を含むaタグのtarget属性を「_blank」に変更するデモ

まとめ

この方法を使用すると、ページ数が多いサイトや、特定の条件に合致するリンクを持つサイトで、リンク属性を一斉に変更することが非常に簡単になります。また、aタグだけでなく、他のタグの属性も同様の方法で変更することが可能です。このように、jQueryはウェブページの要素を効率的に操作するための強力なツールを提供してくれます。是非とも日々の開発作業に取り入れてみてください。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

attr _blank
RELATED POST