クリックされたボタンによってリンクの指定先を変更するjQuery

更新日：2016年7月14日

通常ではあまり使うケースはないかも知れませんが、たまたま仕事の際にやる必要があった為、この記事で紹介しておきます。

通常はa.htmlにリンクされているリンクがあったとします。でもあるボタンを押すと、b.htmlにリンクされているリンクに変更されるというものです。
はて…どうすればいいんだろうって思った方、jQueryならちょちょいのちょいで簡単に実装することが出来るんですよ。

百聞は一見に如かずということで、見て頂きましょう。
「wiki」と「google」と書いたボタンがありますが、それぞれのボタンを押すことでリンク先が変更されます。

リンク先が変わります

それではどのように実装するかというと、HTMLには

リンク先が変わります

と記述。なんてことない普通のアンカーテキストとボタンですね。
ここで重要なことはjQueryで指定する為のclassをaタグにあてるということです。任意の名前で結構ですが、今回はchange_linkというクラス名を付けています。

次にjQueryには

function linkReload(flg) {
	if(flg == 0) {
		$(".change_link").attr("href", "https://goo.gl/9n0Qk");
	} else if(flg == 1) {
		$(".change_link").attr("href", "https://www.google.co.jp/");
	}
}

と記述します。

たったこれだけで完成しました。
.attrの後のURLは好きなURLに変更して使って下さい！