[Web]テキストリンクの中にボタンを埋め込んでみた。
カテゴリー：Web
2023.03.19公開
テキストリンクにリンク機能はなくさずに、別のイベントを追加しなければならなくなりました。
そこで<a>タグ内にボタンを埋め込んでみました。
最初はafter擬似要素で追加したアイコンにボタン機能を持たせようとしたのですが、そこを押した時にリンクへのジャンプを止めることができませんでした。早くも挫折感。
<button>を挿入する方法に変更
そこでスクリプトで<button>を挿入してボタン機能を持たせました。
今回は例としてアイコンをクリックするとURLを表示します。
コード
HTML
<div class="container">
<p>テキストリンク末尾のアイコンをクリックするとURLを表示します。</p>
<p class="paragraph">
<a class="js-link pdf-link" href="https://na.sandt-web.com/temp/codepen/20230317/test.pdf" target="_blank">テキストリンク</a>
</p>
</div>CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
width: 768px;
}
.paragraph {
width: 400px;
}
.pdf-link {
position: relative;
}
.pdf-link:after {
content: "";
background: url(https://na.sandt-web.com/temp/codepen/20230317/icon_pdf.png) no-repeat center center;
background-size: contain;
border: 1px solid #00f;
border-radius: 10%;
display: inline-block;
height: 1em;
width: 2em;
}
.link-btn {
background: rgba(212, 255, 255, .3);
border: 1px solid rgb(212, 255, 255);
/* bottom: 0; */
cursor: pointer;
display: inline-block;
height: 1.6em;
position: absolute;
/* right: 0; */
width: 2.5em;
}スタイル解説
link-btnクラスがボタンになります。position:ablsoluteで末尾のアイコンに重ねてあります。ポイントは縦方向をbottomで設定していることです。テキストリンクが改行された場合、topだと1行目の行末で止まってしまいますが、bottomはリンクの末尾に追随します。
jQuery
$(function () {
$('a[href$="pdf"]').append('<button class="js-btn link-btn"></button>')
$('.js-link:after').on('click', function (e) {
e.preventDefault();
let linkUrl = $(this).attr('href');
window.alert('リンクURLは → '+ linkUrl);
return false;
});
});この記事のカテゴリー：Web
Author
- digital smith - N.A.
- Old schoolなMacユーザー。DTPっぽいことや、WebコーディングやMacサポートとかでご飯を食べてきました。興味のあることはとりあえずやってみたいと思っている面倒くさい人。服が作りたくてIllustratorを使ったパターンメイキングを勉強しています。将来は有機農業をやってみたい。
