5

私は、ハッシュのリスナーを使用してコンテンツ DIV を表示および非表示にし、同じ名前の名前付きアンカーにスクロールするサイトで作業しています。

アンカーまでスクロールする代わりに、アンカーの名前と同じ ID を持つ DIV までスクロールするという奇妙な問題がありました。

DIV ID を別のものに変更すると、動作は期待どおりになりました。

これに関するドキュメントが見つからないようで、これが文書化された動作であるかどうか疑問に思っていました。

動作するコード:

<a name="top">top</a>

<p id="bottomx" style="height: 1800px;">
<a href="#top">top</a>
<a href="#bottom">bottom</a>
<br>
</p>
<a name="bottom">bottom</a>

期待どおりに動作しない:

<a name="top">top</a>

<p id="bottom" style="height: 1800px;">
<a href="#top">top</a>
<a href="#bottom">bottom</a>
<br>
</p>
<a name="bottom">bottom</a>

2 番目の例では、「bottom」という名前の P までスクロールします。同様に、「bottom」という ID でページの下部に DIV を作成し、page.html#bottom をクリックすると、その DIV までスクロールダウンします。

ただ混乱しているようです。なぜこれがこのように機能しているのか考えていますか? Safari と FF で同じ動作です。

4

2 に答える 2

7

idに優先しnameます:

HTML ドキュメント (および HTML MIME タイプ) の場合、ドキュメントの指定された部分が何であるかを判断するには、次の処理モデルに従う必要があります。

  1. URL を解析し、fragid を URL のコンポーネントにします。

  2. fragid が空の文字列の場合、ドキュメントの指定された部分はドキュメントの先頭です。ここでアルゴリズムを停止します。

  3. デコードされた fragid を、有効な UTF-8 シーケンスである fragid 内のパーセントでエンコードされたオクテットのシーケンスを、UTF-8 で定義されている Unicode 文字に展開した結果とします。その文字列のパーセントでエンコードされたオクテットが有効な UTF-8 シーケンスでない場合 (たとえば、サロゲート コード ポイントに展開される場合)、この手順と次の手順をスキップします。

  4. このステップがスキップされておらず、デコードされた fragid と正確に等しい ID を持つ要素が DOM にある場合、ツリー順で最初のそのような要素がドキュメントの指定された部分です。ここでアルゴリズムを停止します。

  5. name 属性の値が fragid とまったく同じ (デコードされた fragid ではない) を持つ a 要素が DOM にある場合、ツリー順で最初のそのような要素は、ドキュメントの指定された部分です。ここでアルゴリズムを停止します。

  6. fragid が大文字と小文字を区別しない ASCII 文字列 top の一致である場合、ドキュメントの指定された部分はドキュメントの先頭です。ここでアルゴリズムを停止します。

  7. それ以外の場合、ドキュメントの示された部分はありません。

于 2012-05-06T23:08:59.413 に答える
1

HTML4.01およびXHTML1.0の仕様nameでは、a要素内の属性が属性の値と同じであってはならないことが要求されていidます。ただし、同じ要素に設定されている場合、ドキュメントにエラーがあります。ブラウザは独自のエラー処理を自由に適用できますが、これは計画外の場合があります。

HTML5ドラフトは、複雑なエラー処理ルールを指定していnameますが、要素内の属性aを廃止として宣言しています。

同じドキュメント内の2つの要素に同じ値を使用することは非論理的です（正式には禁止されています） 。これは、要素の一意の識別子を提供することがid目的であり、唯一の目的であるためです。この構成はHTMLの歴史の中で以前からあり、制限された設定で常にと同じ役割を果たすことを目的としていました。したがって、同じように扱われるのは当然です。id<a name=...>idid

于 2012-05-07T04:41:55.950 に答える