本記事は執筆時点(2023年04月04日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。
attrメソッドでaタグのhref属性を操作する
aタグのhref(リンク先のURL)を書き換えたい場合は、attrメソッドを使用します。
attrメソッドはセレクターの属性値を取得・操作できるメソッドです。
attrメソッドでHTMLのIDを取得する方法についてはこちらをご覧ください。
jQueryでidを取得する方法【attrメソッドの使い方】
jQueryでHTMLの要素に付与されているidを取得するためには「attr()」メソッドを使用します。attrメソッドは要素の属性を取得や変更、削除を行うことができるメソッドです...【もっと読む】
hrefも属性のひとつですので、attrメソッドで次のように記述すれば書き換えることができます。
特定のaタグのみを対象にしたい場合は、クラスやIDなどのセレクターを使って指定してください。
ここからは、「リンク先のURLを丸ごと書き換える場合」「リンク先のURLの一部を書き換える場合」の方法をそれぞれ解説していきます。
リンク先のURLを丸ごと書き換える場合
まずはhrefに元々記述されているリンク先のURLを丸ごと別のものに置き換える方法です。
次の例では、元の「http://sample.com」というリンク先を「http://test.jp」に置き換えています。
HTML
<a id="target" href="http://sample.com">別サイトを開きます</a>
jQuery
$(function(){ $("a#target").attr("href","http://test.jp"); });
プレビュー
リンク先のURLの一部を書き換える場合
リンク先のURLの一部だけを書き換えたい時は、replaceメソッドで文字の置き換えを実行してからattrメソッドで書き換えるという方法になります。
replaceメソッドでHTMLのIDを取得する方法についてはこちらをご覧ください。
jQueryで文字列の置換を行う方法【replaceメソッドの使い方】
文字列の置換には、Javascriptのreplace()メソッド、jQueryのreplaceWith()もしくはreplaceAll()メソッドを使用します。ユーザーがフォームに入力した内容によって表示するテキストを変更するなど...【もっと読む】
次の例では、元の「http://sample.com/page123」というリンク先を「http://sample.com/testPage」に置き換えています。
HTML
<a id="target" href="http://sample.com/page123">別サイトを開きます</a>
jQuery
$(function(){ //現在hrefに記述されているURLを取得 var url = $("a#target").attr("href"); //取得したURLの一部を書き換えたものを用意 var urlReplace = url.replace("page123","testPage"); //hrefのURLを置き換える $("a#target").attr("href",urlReplace); });
プレビュー
まとめ
以上がjQueryでaタグのhref(リンク先)を書き換える方法です。
ユーザーのアクションなどに応じて、遷移するページを動的に切り替えるなど使いどころは様々です。