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

例えばボタンなど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”]
SHARE
無料メルマガ<特典付き>
個人開発・ビジネスについての有益な情報を無料メルマガでお届けします。
個人開発のスキルアップにMENTA
MENTAはいろんなプロに相談できるNo1メンターサービスです。
僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。
YouTubeでも個人開発ノウハウを発信中!
PROFILE

入江 慎吾
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表/個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました/福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 (詳しいプロフィール)
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表/個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました/福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 (詳しいプロフィール)