Tbpgr Blog

Recruiting Operations tbpgr(てぃーびー) のブログ

HTML | aタグから任意のタグのid属性に移動する

概要

aタグから任意のタグのid属性に移動する

内容

aタグから任意のタグのid属性に移動します。

<!-- 移動元 -->
<a href="#xxx">to xxx</a>
:
:
<!-- 移動先 -->
<div id="xxx">xxx</div>

サンプル

html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <header>Jump Test</header>
  <hr>
  <nav>
    <a href="#hoge_1">hoge_1</a>
    <a href="#hoge_2">hoge_2</a>
    <a href="#hoge_3">hoge_3</a>
    <a href="#hoge_4">hoge_4</a>
    <a href="#hoge_5">hoge_5</a>
    <a href="#hoge_6">hoge_6</a>
    <a href="#hoge_7">hoge_7</a>
    <a href="#hoge_8">hoge_8</a>
    <a href="#hoge_9">hoge_9</a>
    <a href="#hoge_10">hoge_10</a>
  </nav>
  <hr>
  <div id="hoge_1" style="height:100px;">hoge_1</div>
  <div id="hoge_2" style="height:100px;">hoge_2</div>
  <div id="hoge_3" style="height:100px;">hoge_3</div>
  <div id="hoge_4" style="height:100px;">hoge_4</div>
  <div id="hoge_5" style="height:100px;">hoge_5</div>
  <div id="hoge_6" style="height:100px;">hoge_6</div>
  <div id="hoge_7" style="height:100px;">hoge_7</div>
  <div id="hoge_8" style="height:100px;">hoge_8</div>
  <div id="hoge_9" style="height:100px;">hoge_9</div>
  <div id="hoge_10" style="height:100px;">hoge_10</div>
</body>
</html>
画像移動前

画像移動後

hoge_2へ移動

おまけ

サンプルのhtmlを生成するためのEmmetワンライナー

html:5>header{Jump Test}+hr+nav>a[href=hoge_$]{hoge_$}*10^hr+div[id=hoge_$ style=height:100px;]{hoge_$}*10