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では個人開発について語ってます / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営（詳しいプロフィール）
