問題
外部にリンクしているaタグにアイコンを付けたい。
解決策
外部サイトへのリンクに対してjQueryで「target=“_blank”」を設定し、cssでa[target=“_blank”]に対してアイコンを設定する。
外部サイトへのリンクを判定し、自動的にアイコンを設定する。
外部サイトにリンクした際に、自動的にアイコンを付けさせる方法を紹介します。今回はjQueryを連携させたパターンになります。
jQueryの構築
まず、aタグの外部サイトへのリンクを判定し、「target=“_blank”」を付与させるjQueryを構築します。
$(function(){
var url = location.hostname;
$('a[href^="http"]').not('[href*="'+url+'"]').attr('target','_blank’);
});CSSの構築
次に、「target=“_blank”」が設定されているaタグに対して、cssを設定します。
a[target="_blank"]:after{
content: "";
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
margin-left: 10px;
background-image: url(../images/common/anchor-blank.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 20px auto;
}
コメント