57
4

7 に答える 7

99

<a>アンカーの略

[href]要素に属性を含めると<a>、それは場所を指すアンカーになります。つまり、新しいページ、現在のページの特定のフラグメント（したがって、#フラグメント識別子と呼ばれる）、または特定のページに移動できます。新しいページのフラグメント。

<a>属性のない要素には、[href]歴史的に属性が割り当てられていました[name]。これは、フラグメント識別子の宛先として使用できます。ブラウザは後でアイテムの[id]属性へのリンクのサポートを追加しました。これは現在、ドキュメントフラグメントにリンクするための推奨される方法です。

<a>これはスタンドアロン要素にとってどういう意味ですか？

a[href]要素はリンク:linkです（これがcssで一致する理由です） 。リンクはクリック可能です。それ以外の場合、属性のaない要素[href]は、リンクが配置されている可能性のある場所の単なるプレースホルダーであり、クリックできません。また、ページのタブ順でもありません。

アクセシビリティ（ WAI-ARIA ）にとって重要なキーボードでリンクをナビゲートできるようにする場合は、次のいずれかを実行する必要があります。

  • 要素をに変更します<button type="button">
  • [href]属性を保持する
  • [tabindex="0"]およびの1つ[role="button"]（[role="link"]および場合によってはいくつかのスタイリング）を追加します

[role]属性の詳細については、WAI-ARIAドキュメントの「ロールモデル」セクションを参照してください。

マークアップの変更

[href]属性を保持する理由がない場合は、次の<button>要素を使用することをお勧めします。

<button type="button">
        ^^^^^^^^^^^^^

この[type]属性は、要素を汎用ボタンにするために使用されます。それ以外の場合<button>は、デフォルトで。になります[type="submit"]。これは、フォームの送信をトリガーする可能性があるため、望ましくない場合があります。

を使用できない場合<button>（通常、内部マークアップにを含める必要がある場合に発生します）、次を使用して<div>偽造することができます。<button>

<div role="button" tabindex="0">Some clickable text</div>

イベントをリッスンし、とのイベントをトリガーする必要がkeypressあります。clickEnterSpace

マークアップを維持する

<a>要素とその属性を保持している場合[href]、その値にはいくつかのオプションがあります。

本当のリンク

元

  • <a href="/some/location/for/users/without/js">
  • <a href="#document-fragment">

JSが無効になっているユーザーにサポートを提供する必要がある場合は、JSなしで同等の機能を実行するページにユーザーを誘導することもできます。

拡張により、これには、同じドキュメント内のコンテンツにリンクするためのドキュメントフラグメントリンクの提供も含まれます。たとえば、切り替え可能な領域は次のようにマークアップできます。

<a href="#more" class="toggleable">Read More</a>
<div id="more">Lorem ipsum dolor sit amet</div>

JSを使用すると、領域を折りたたんだり展開したりできます。JSを使用しない場合、リンクによってユーザーはページ上の適切なコンテンツに移動します。

不発弾

元

  • <a href="#">
  • <a href="javascript:void(0)">
  • <a href="about:blank">

JavaScriptの舞台裏でのデフォルトの動作を妨げていて、JSが無効になっているユーザーをサポートしていない場合は、「dud」href値を使用してリンクをタブ順に保ち、自動的に有効Enterにしてclickイベント。タグはリンクとしてではなくボタンとして使用されているため、意味的に追加する必要があります。[role="button"]<a>

<a href="#" role="button">Some clickable text</a>
于 2012-06-21T19:04:57.910 に答える
15

個人的にはhref="javascript:void(null);"、他のハッシュの使用を台無しにしない href をブラウザーに与えるために、 を使用することを好みます。

href のないリンクについて私が気付いた唯一の違いは、ブラウザがデフォルトで下線を引かないことです。そのため、そのスタイルを追加するだけで問題ありません。

于 2012-06-21T18:49:55.970 に答える
1

HTML、CSS、JS テンプレートを React に実装していましたが、このコード行は完全に機能します。

<a href={() => false}> Link </a>
于 2018-12-05T18:42:02.157 に答える
-1

ブードゥーを認識していませんが、ページに多くのリンクがあり、href をプルする場合は、クラス名を追加して、それぞれに青と下線を付ける必要があります。言い換えれば、ブラウザーがすべて処理する準備ができているのに、なぜより多くの作業を導入するのでしょうか。要するに、あなたが知っていることに固執してください.hrefを削除すると、ページはhttp://validator.w3.org/を検証しないと思われます

于 2012-06-21T18:48:00.370 に答える