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

プロフィール

入江 慎吾／サービス開発だけで生きていく
自分のサービスだけで自由に生きる。勢いで受託開発をすべてやめて、サービスだけ作って生きていくことを決めたフリーのエンジニア。得意を教えて副業にできるMENTAを開発中！ （詳しいプロフィール）

WEBサービス・アプリ開発に役立つ情報をイリテクの入江がお届けします。プログラミング、UI/UXデザイン、SNS・ブログマーケティングなど、プロダクト開発だけで自由に生きていくための実践的な情報を配信しています。

無料メールマガジンを購読する

PRODUCT

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