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

• Tweet

例えばボタンなど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でデザインすることが多くなっているので、よく使うテクニックです。

フリーランスエンジニアの稼ぎ方

フリーランスエンジニアの稼ぎ方。ぶっちゃけ…開発以外のことを頑張ったほうが結果がでます。

• Tweet

PROFILE

プロフィール

入江 慎吾
サービスで世界をよりよくするために挑戦中。個をエンパワーメントするプロダクトをつくっています。個人開発コミュニティ「入江開発室」を運営（約300名） / MENTAなど20個以上のプロダクトを開発。
（詳しいプロフィール）

PRODUCT

イリテクで開発したプロダクト