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



ページ内のaタグのターゲット(target属性)を、
jQueryの.attrを使って全て「_blank」に変更してみます。

1.読込むJsファイルとJavaScriptの記述例

リンク(URL文字列)内に「/category/」を含むaタグは
ターゲット(target)属性「_blank」を指定してます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
     $("a[href^='/category/']").attr("target","_blank");
});
</script>

2.HTMLの記述例

    <ul>
    <li><a href="/category/css" title="CSS に含まれる投稿をすべて表示">CSS</a></li>
    <li><a href="/category/facebook" title="Facebook に含まれる投稿をすべて表示">Facebook</a></li>
    <li><a href="/category/html5" title="HTML5 に含まれる投稿をすべて表示">HTML5</a></li>
    <li><a href="/category/javascript" title="JavaScript に含まれる投稿をすべて表示">JavaScript</a>
        <ul>
            <li><a href="/category/javascript/ajax" title="Ajax に含まれる投稿をすべて表示">Ajax</a></li>
            <li><a href="/category/javascript/jquery" title="jQuery に含まれる投稿をすべて表示">jQuery</a></li>
        </ul>
    </li>
    <li><a href="/category/php" title="PHP に含まれる投稿をすべて表示">PHP</a>
        <ul>
            <li><a href="/category/php/smarty" title="Smarty に含まれる投稿をすべて表示">Smarty</a></li>
        </ul>
    </li>
    <li><a href="/category/seo" title="SEO に含まれる投稿をすべて表示">SEO</a></li>
    <li><a href="/category/wordpress" title="WordPress に含まれる投稿をすべて表示">WordPress</a></li>
    <li><a href="/category/sonohoka" title="その他 に含まれる投稿をすべて表示">その他</a></li>
    <li><a href="/category/smartphone" title="スマートフォン に含まれる投稿をすべて表示">スマートフォン</a>
        <ul>
            <li><a href="/category/smartphone/android" title="Android に含まれる投稿をすべて表示">Android</a></li>
        </ul>
    </li>
    </ul>

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

これを使えばページ数が多いサイト等はページ内よリンク属性を
一斉に変更できそうです。
(aタグだけで無く、違う種類のタグも変更できそうですね)