• HOME > 
  • JavaScript > 
  • jQueryでaタグのhref(リンク先)を書き換える方法【...

jQueryでaタグのhref(リンク先)を書き換える方法【一部だけ書き換えるには?】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

attrメソッドでaタグのhref属性を操作する

aタグのhref(リンク先のURL)を書き換えたい場合は、attrメソッドを使用します。

attrメソッドはセレクターの属性値を取得・操作できるメソッドです。

リンク先のサムネイル
jQueryでidを取得する方法【attrメソッドの使い方】

jQueryでHTMLの要素に付与されているidを取得するためには「attr()」メソッドを使用します。attrメソッドは要素の属性を取得や変更、削除を行うことができるメソッドです...【もっと読む】

hrefも属性のひとつですので、attrメソッドで次のように記述すれば書き換えることができます。

attrメソッドでhrefを書き換え

特定の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");
});

プレビュー

<a id="target" href="http://test.jp">別サイトを開きます</a>

リンク先のURLの一部を書き換える場合

リンク先のURLの一部だけを書き換えたい時は、replaceメソッドで文字の置き換えを実行してからattrメソッドで書き換えるという方法になります。

リンク先のサムネイル
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);
});

プレビュー

<a id="target" href="http://sample.com/testPage">別サイトを開きます</a>

まとめ

以上がjQueryでaタグのhref(リンク先)を書き換える方法です。

ユーザーのアクションなどに応じて、遷移するページを動的に切り替えるなど使いどころは様々です。

広告
広告

関連する記事

サムネイル

JavaScriptで偶数と奇数を判定する方法【テーブルの行……

2024年05月16日
ある数値が偶数か奇数かは、「数値を2で割って余りが0なら偶数」「数値を2で割って余りが0でなければ奇数」という方法で判別を行います。
サムネイル

JSで郵便番号検索を実装できるライブラリ【yubinbang……

2024年04月12日
yubinbango.jsは郵便番号検索(郵便番号を打ち込むと住所が自動入力される)機能を簡単に実装できるのライブラリです。一実装方法がとても簡単なのでメールフォームなどに手軽に郵便番号検索機能を導入したい方におすすめです。
サムネイル

JSで特定の位置までスクロールされたら要素を固定する方法【s……

2024年04月12日
CSSのstickyのような動きをJSで実装する JavaScriptを使って、「ある要素がページ上部に当たるまでスクロールされたら、その位置でその要素を固定表 […]
サムネイル

JSで日付を表示するならtoLocaleDateString……

2024年03月15日
toLocaleDateStringは日付のフォーマットを少ないコードで簡潔に行えるメソッドです。20XX年X月X日というような年月日表示はもちろん、曜日の取得や西暦と和暦の変換まで即座に行ってくれます
サムネイル

JSで自動かな入力補完を実装できるライブラリ【jquery.……

2024年03月15日
jquery.autokana.jsは入力された日本語テキストのふりがな(フリガナ)を自動的に別の欄に入力してくれるJQueryのライブラリです。
サムネイル

JSでページ離脱時にメッセージを出す方法【beforeunl……

2024年03月15日
JavaScriptのイベントであるbeforeunloadを使えばページを離脱する前にメッセージを出して注意を促すことができます。
サムネイル

Javascriptのlightboxライブラリの使い方【画……

2023年10月01日
最終更新日:2023年09月12日
lightboxライブラリでできること Webサイトでは、ユーザーがクリックすると大きい画像が開くという表示方法が良く用いられます。 一覧では小さい画像を並べて […]