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

04/16/2014

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

まずは、見た目のみ準備

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="https://iritec.jp/" 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でデザインすることが多くなっているので、よく使うテクニックです。

[sc name=”engeneer”]

PROFILE

入江慎吾
Webサービスを作るのが大好きです。制作会社10年→フリーランス→受託をやめサービス開発に専念。プログラミングのメンターサービスMENTAは月間流通額約1,300万を突破🚀 YouTubeでは個人開発について語ってます / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営（詳しいプロフィール）

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

まずは、見た目のみ準備

jQueryでリンクを貼る

SHARE

PROFILE