ハッシュリンクのアンカー名を拾う「xHashchange」
当ページのリンクには広告が含まれています。
スポンサーリンク
ハッシュリンクのアンカー名を拾うプラグイン「xHashchange」を紹介します。
jQueryプラグイン「xHashchange」
ハッシュリンクとは、ページ内リンクなどに使われるurlの末尾に #（シャープ）から続くアンカー名を含むリンクのことをいいます。以下の例では「#hash」がハッシュリンクです。
<a href="#hash">リンク</a>
このプラグインを使えば、クリックアクションでアンカータグに含まれるハッシュリンクのアンカー名を拾うことができます。ユーザーのアクションに応じて、ページ内のテキストなどを変更する場合に便利ですね。
スポンサーリンク
デモでは、ハッシュリンクを含むアンカータグがあるのでクリックしてみてください。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="xHashchange のデモでーす。">
<title>xHashchange - jQuery Plugin Demo</title>
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/xhashchange/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>xHashchangeのデモでーす。</h1>
<ol>
<li><a href="#hash1">クリック！</a></li>
<li><a href="#hash2">クリック！</a></li>
<li><a href="demo.html#hash3">クリック！</a></li>
<li><a href="#hash4">クリック！</a></li>
<li><a href="demo.html#hash5">クリック！</a></li>
</ol>
<p id ="output">ハッシュリンクのアンカー名</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.xhashchange.js"></script>
<script>
$(function () {
$(window).hashchange(function () {
$("#output").text("ハッシュリンクのアンカー名 → " + location.hash);
});
});
</script>
</body>
</html>
スポンサーリンク