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
PROFILE

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