2014年07月18日

aタグのリンク先(href)をjQueryで変更する

   
スマホとPCでリンク先を出し分けるなど、aタグのリンク先を動的に変更したいケースがあります。そんな時はjQueryで簡単に変更が可能です。リンク先URLの差し替え例と一部だけ置換する例の二例をご紹介。

hrefの値を指定したURLに差し替える例

例えば変更前のHTMLが下記だとします。

jQueryの記述は下記の通り。
$(document).ready(function() {
$("#link_text a").attr("href", "http://www.db.gs/")
});

こうすることで、リンク先が下記の通り書き換わります。


リンク先の一部を置換する例

ドメインや拡張子だけを一括で置換したい場合、下記のように記述します。この例の場合、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);
});
});

結果は下記の通り。


jQueryでaタグのリンク先(href)を変更する方法でした。


posted by Liang Zhaohong at 17:39 | Comment(0) | TrackBack(0) | JS、jQuery、prototype | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。