ページ内ジャンプの手法を実現するためのタグのname属性とid属性
2022-01-16 02:33:51
aタグのname属性を使ってジャンプできることだけは知っていましたが、id属性も使えることを今日知りました。
nameは複数回繰り返すことができ、idは1回しか使えませんが、もちろん仕様に従わない場合は何回か使ってください。
デモは以下の通りです。
<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo--In-Page Jumping</title>
<style type="text/css">
.div1{height:400px;background:gray}
</style>
</head>
<body>
<a href="#jump1">In-page jump demo 1 - A tag href="#jump1"</a><br _fcksavedurl="& quot;#jump1">In-page jump demo 1 - A tag href="#jump1"</a><br" /><a href="#jump2& quot;>In-page jump demo 2 - A tag href="#jump2"</a>
<div class="div1"></div>
<p id="jump1">On-page jump demo 1 - any tag id="jump1"</a>
<div class="div1"></div>
<a name="jump2">In-page jump demo 1 - A tag name="jump2"</a>
<div class="div1"></div>
</body>
</html>
nameは複数回繰り返すことができ、idは1回しか使えませんが、もちろん仕様に従わない場合は何回か使ってください。
デモは以下の通りです。
コピーコード
コードは以下の通りです。
<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo--In-Page Jumping</title>
<style type="text/css">
.div1{height:400px;background:gray}
</style>
</head>
<body>
<a href="#jump1">In-page jump demo 1 - A tag href="#jump1"</a><br _fcksavedurl="& quot;#jump1">In-page jump demo 1 - A tag href="#jump1"</a><br" /><a href="#jump2& quot;>In-page jump demo 2 - A tag href="#jump2"</a>
<div class="div1"></div>
<p id="jump1">On-page jump demo 1 - any tag id="jump1"</a>
<div class="div1"></div>
<a name="jump2">In-page jump demo 1 - A tag name="jump2"</a>
<div class="div1"></div>
</body>
</html>
関連
-
html のリストボックス、テキストフィールド、ファイルフィールドのコード例
-
HTMLとJavaScriptでローカルメディア（ビデオやオーディオ）ファイルを再生する方法
-
1行のコードでIEの様々な互換性問題を解決（IE6-IE10）
-
nofollowタグの使用と分析
-
HTMLimgタグのalt属性とtitle属性の使い方紹介
-
textareaの動的な残り単語を取得するメソッドの実装方法
-
HTMLタグのセマンティクス入門
-
ウェブデザインにおけるラウンドエレメントの使用例25選
-
Baiduの入力メソッドオープンAPIは、使用を移植するために自由であると主張する
-
Web制作ではHタグを賢く使うべき
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
HTMLページを縮小した後にスクロールバーを表示するサンプルコード
-
HTML要素の高さ、offsetHeight、clientHeight、scrollTopなどについて説明します。
-
互換性を保ちながら、iframeを使って相手ページのデータを適用する方法
-
htmlのタイトル、段落、改行、横線、特殊文字について語る
-
レスポンシブフレームワークの分析、テーブル表ヘッダー自動改行クイックソリューション
-
htmlテキスト中の全てのタグを置換する方法
-
IEとFFでスペースの幅を同じにするには？
-
HTML 特殊な分割線エフェクトをいくつか紹介します。
-
IE6のバグと修正 謂わば防患于未然的な策略
-
WebページのレイアウトはIE6との互換性の問題を考慮する必要がある