(cache) jQueryを使って、div全体にリンクを貼る方法。_blank対応も。

例えばボタンなどdiv全体にリンクを貼りたいことがありますが、その際に便利なTipsのご紹介です。

SPONSOR

まずは、見た目のみ準備

CSSでボタンを作ります。リンクもdivの中に置いて構いません。CSSでdivの上にマウスがのったときに、カーソルが変わるよう変更しています。

<style>
.sbtn{
margin-right:10px;
text-align:center;
background-color: #28B0FF;
padding:10px;
color:#fff;
text-decoration:none;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin-bottom:10px;
cursor:pointer;
}
</style>
<div class="sbtn">
<a href="http://plus.vc/" target="_blank">Facebook</a>
</div>

jQueryでリンクを貼る

$(document).ready(function(){
	 $(".sbtn").click(function(){
	 	 if($(this).find("a").attr("target")=="_blank"){
			 window.open($(this).find("a").attr("href"), '_blank');
	 	 }else{
		 	 window.location=$(this).find("a").attr("href");
	 	 }
	 return false;
	 });
})

これで、divをクリックしてもリンクが動作するようになります。

ポイントはリンクタグにtarget属性で_blankを指定しているかどうかで条件分岐をして、_blankの場合は別窓が開くようにしているところです。ボタンなんかは最近では画像ではなく、CSSでデザインすることが多くなっているので、よく使うテクニックです。