リンクを書き換える

ADD20080110
単に、blank使いたいけど、バリデーションの兼ね合いなら、

<a href="http://d.hatena.ne.jp/banzan/" onclick="this.target='_blank';" onkeypress="this.target='_blank';">jQuery メモ帳</a>

でも、いいと思います。

【やる事】

htmlドキュメントに、a エレメントがあって、hrefアトリビュートが、http://から始まっている場合は、新しいページで開きたい。という場合、htmlドキュメントを読み込んだ直後に、jQueryでリンクを書き換えてしまう。

/とか、../ ./等で始まっている場合は、同じページでjQueryってくれます。

href="http://　な　a 要素　に、クラス属性　externalを追加して、更に、ターゲット属性を追加して、a要素の広報に、htmlを追加してほしいと、jQueryっています。

<script type="text/javascript">

(function($) {
jQuery(function() {
	
	//絶対URLの場合は、ターゲットアトリビュートを追加する。
	
	jQuery('a[@href^="http://"]').addClass('external').attr('target', '_blank').append("<span >&nbsp;外部リンク</span>");
	});
	
})(jQuery);
</script>
<style type="text/css">
<!--
.external{color:#fff;}

-->
</style>

('a[@href^="http://"]') の指定方法が、なんだかぱっさりわからないので、調べてみました。

CSS セレクタに関するおさらい

E[foo^="bar"]

ある要素の中で、指定した属性名、及び属性値を持つ要素にスタイルを指定しますが、「^」 を使用することで、指定の文字で始まる属性値に対してスタイルを適用します。CSS3 で定義されました。

p[class^="ex"] {
margin:0;
padding:0;
}

class 属性を持つ p 要素の中で、ex から始まる属性値を持つものにスタイルを指定します。これを利用して外部リンクにのみ自動的に外部リンクを示すアイコンを付ける方法を以前に紹介しました。(参考エントリー)

【注意】

jQueryと書いている部分は、

以下のような書き方の時には、例えば、
$(function(){

$('a[@href^="http://"]').addClass('external').attr('target', '_blank').append("<span >&nbsp;新しいページで開くよ</span>").css("color","#ffffff");
	
});