素材の壺

PC版とスマートフォン版でリンク先を出し分けるために、リンク先URLをPC版とスマートフォン版で差し替える例と、一部だけ置換する例をご紹介します。

リンク先URLを指定したURLに差し替える例

変更前のHTMLがこのように書かれているとします。

リンクテキスト

この場合、下記のようにjQueryを記述します。

$(document).ready(function() {
$("#link_text a").attr("href", "http://www.db.gs/")
});

これでリンク先URLが差し替えられて下記のようになります。

リンクテキスト

リンク先URLを部分的に置換する例

ドメインや拡張子など、部分的に置換したい場合は下記のように記述します。この例の場合、aタグ全てのhrefの値を「.com」から「.jp」に置換します。

$(document).ready(function() {
$("a").each(function() { 
var replace = null;
var replace = $(this).attr('href').replace(/.com/g,'.jp');
$(this).attr('href',replace);
});
});

これでリンク先URLは下記のようになります。

リンクテキスト

以上、jQueryでaタグのhrefの値(リンク先URL)を差し替えもしくは置換する方法でした。