今日の人気記事

  1. Bootstrapを使ったカレンダーを実装「Zabuto Calendar」
  2. 数値範囲をマウスで指定 - レスポンシブ・レンジスライダー「noUiSlider」
  3. レトロなフリップ時計やカウントダウンタイマーを実装「flipCountDown」
  4. ブラウザーをフルスクリーン(全画面)表示に「Fullscreen」

ハッシュリンクのアンカー名を拾う「xHashchange」

スポンサーリンク

ハッシュリンクのアンカー名を拾うプラグイン「xHashchange」を紹介します。

jQueryプラグイン「xHashchange」

ハッシュリンクとは、ページ内リンクなどに使われるurlの末尾に #(シャープ)から続くアンカー名を含むリンクのことをいいます。以下の例では「#hash」がハッシュリンクです。

<a href="#hash">リンク</a>

このプラグインを使えば、クリックアクションでアンカータグに含まれるハッシュリンクのアンカー名を拾うことができます。ユーザーのアクションに応じて、ページ内のテキストなどを変更する場合に便利ですね。

スポンサーリンク

デモでは、ハッシュリンクを含むアンカータグがあるのでクリックしてみてください。

「xHashchange」のデモ

ソース(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>
スポンサーリンク

関連記事(一部広告含む)