・画面幅によってリンク先を変えたいんだけど、どう実装するの？
こんな疑問にお答えします。
サイトによっては、画面幅によってリンク先を変えることなどがありますよね。
例えばPCの画面幅だと、このリンク先に。スマホの画面幅だとこのリンク先にしたいなど。
これ実は簡単に実装できちゃいます。
すぐにできるよ！
ということで、この記事では「画面幅によってaタグのリンク先を変える」について解説していきます！
・画面幅によってaタグのリンク先を変える
・画面幅によってaタグのリンク先を変える【画面幅変わるたびイベント実行】
目次
【jQuery】画面幅によってaタグのリンク先を変える【コピペOK】
サンプルがこちら↓
See the Pen 横幅によってリンク先を変える by jito-coder (@jito-coder) on CodePen.
640px以上の画面幅で見ていると、僕のTwitterアカウントのリンクに。
640px以下の画面幅で見ていると、僕のTOPページのサイトリンクに。
<section class="test wrapper">
<div class="test__container">
<h2 class="test__title">640px以上か以下でリンク先変わる</h2>
<div class="test__box">
<a href="https://twitter.com/jito_coder" target="_blank" class="test__link">
640px以上だとTwitterのリンク。640px以下だとTOPページに飛ぶよ。
</a>
</div>
</div>
</section>$(function() {
const w = $(window).width();
const x = 640;
if (w <= x) {
$('.test__link').attr('href','https://jito-site.com/')
}
})正直、実装方法は簡単です。
- 通常通りaタグを作成
- そのaタグのhref属性を画面幅によって変更するよう記述
順に見ていきましょう。
まずいつもどおり、aタグを作成していきましょう。
こんな感じで↓
<a href="https:/～" target="_blank" class="hoge"></a>例として「hoge」というクラスをつけました。このリンク先が640px以上の時に、遷移するページとなります。
次にhref属性を変更するような記述を、jQueryで記述していきます。
それがこちら↓
$(function() {
const w = $(window).width();
const x = 640;
if (w <= x) {
$('.hoge').attr('href','https:/～')
}
})このコードは簡単に説明すると
「ウインドウの画面幅がもし640pxより小さかったら、hogeのhref属性をhttps:/～にする」
という意味。
これだけで実装可能です。
あとは数値や、大なり小なりの向きを変えるなりして、案件にそってカスタマイズしていきましょう。
【jQuery】画面幅によってaタグのリンク先を変える【画面幅が変わるたびにイベント発動】
先ほどのコードでは、画面幅を変える＋リロードした時にリンク先が変わるような仕様でした。
つまりパソコンで見てたとして、途中で画面幅を小さくしてみても、リンク先は変わりません。一度更新する必要があります。
ただ下記サンプルなら、更新せずとも、画面幅が変わるたびにリンク先が変わるイベントが発動されます。
See the Pen 横幅によってリンク先を変える by jito-coder (@jito-coder) on CodePen.
変更したコードがこちら↓
function function_link() {
$(function() {
const w = $(window).width();
const x = 640;
if (w <= x) {
$('.test__link').attr('href','https://jito-site.com/')
}
})
}
$(window).resize(function(){
function_link();
});
function_link();「resize」を使うことにより、画面幅が変わるたびにイベント発動してリンク先が変わるような仕様になりました。
【jQuery】画面幅によってaタグのリンク先を変える【コピペOK】：まとめ
- 画面幅によってリンク先を変えることは可能
- ただ通常記述だと、途中で画面幅が変わったさいに対応できない。一度更新する必要がある。
- 対策としては「resize」を使う
画面幅によってリンク先を変える実装は、たまに使うので覚えておこう！
