回答:
アンカータグの主な用途は、 - <a></a>
-としてあるハイパーリンク。それは基本的に彼らがあなたをどこかに連れて行くことを意味します。ハイパーリンクにはhref
場所を指定するためプロパティ。
ハッシュ- #
ハイパーリンク内では、ウィンドウのスクロール先のhtml要素IDを指定します。
href="#some-id"
などの現在のページの要素までスクロールします<div id="some-id">
。
href="https://stackoverflow.com//site.com/#some-id"
site.com
そのページのIDに移動してスクロールします。
href="#"
ID名は指定しませんが、対応する場所(ページの上部)はあります。でアンカーをクリックするとhref="#"
、スクロール位置が一番上に移動します。
ハイパーリンクプレースホルダーが有効な例は、テンプレートのプレビュー内です。テンプレートの単一ページのデモで<a href="#">
は、アンカータグがハイパーリンクであるにもかかわらず、どこにも移動しないことがよくあります。なぜ残していないhref
プロパティを空白の?空白のhref
プロパティは、実際には現在のページへのハイパーリンクです。つまり、ページが更新されます。私が議論したように、これhref="#"
もハイパーリンクであり、スクロールを引き起こします。したがって、ハイパーリンクプレースホルダーの最善の解決策は、実際にhref="#!"
は次のとおりです。id="!"
(誰がそれを行うのか!?)、ハイパーリンクは何も参照しないため、何も起こりません。
疑問に思われるかもしれないもう1つの質問は、「hrefプロパティをオフのままにしないのはなぜですか?」です。私が聞いた一般的な応答は、href
プロパティは必須であるため、アンカーに存在する必要があるというものです。これは間違いです!href
プロパティは、実際にハイパーリンクされるようにアンカーのためにのみ必要です!これをw3から読む。それでは、プレースホルダーにそのままにしておくのはどうですか。ブラウザーは要素のデフォルトスタイルをレンダリングし、hrefプロパティを持たないアンカータグのデフォルトスタイルを変更します。代わりに、通常のテキストのように見なされます。要素に関するブラウザの動作も変更します。ステータスバー(画面の下部)は、hrefプロパティなしでアンカーにカーソルを合わせると表示されません。アンカーでハイパーリンクとして扱われるようにするには、アンカーでプレースホルダーのhref値を使用するのが最適です。
.click()
メソッドをで使用したい場合<div></div>
、機能しません。アンカーの上にいる必要があるか、touch
イベントを使用する必要があります。
"#"記号を何かのhrefとして置くことは、別のURLではなく、同じページ上の別のIDまたは名前タグを指すことを意味します。例えば:
<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>
ただし、IDや名前がない場合は、「どこにもありません」。
これは、「名前」または「ID」を持つHTMLアンカーに寄せられた別の同様の質問ですか?
<a href="#">...</a>
「どこにも行かない」のではなく、ページを離れてロードしているため、ここに来ましたsite.com/#
。そんなことがあるものか?
onclick
イベントハンドラーがその要素に関連付けられていたため、そのページにリダイレクトするJavaScript関数が呼び出されたためです。
残念ながら、の最も一般的な使用法<a href="#">
は、アンカーのように動作するクリック可能な非ハイパーリンクのJavaScriptコード要素を必要とする怠惰なプログラマーですが、非ハイパーリンク要素のクラスにスタイルを追加しcursor: pointer;
たり、追加したりすることはできません。:hover
に設定href
するのが面倒javascript:void(0);
です。
これの問題は、いずれ<a href="#" onclick="some_function();">
かが必然的にjavascriptエラーで終了し、onclick javascriptエラーのあるアンカーが常にその後に続くことhref
です。通常、このページの最上部に迷惑なジャンプしてしまうが、は、使用しているサイトの場合は<base>
、<a href="#">
として処理され<a href="[base href]/#">
、予想外のナビゲーションが得られ、。 場合は任意のlogableエラーが発生しているあなたが永続的なログを有効にしない限り、あなたは後者のケースでそれらを表示されません。
アンカー要素が場合されて非アンカーとして使用することはする必要があり、その持っているhref
にセットをjavascript:void(0);
するために優雅な劣化。
単にページを更新する必要がある、予期しないランダムなページリダイレクトをデバッグして2日間無駄にしただけで、最後に、のクリックイベントを発生させる関数まで追跡しました<a href="#">
。と交換し#
て交換javascript:void(0);
します。
月曜日に最初に行うことは、のすべてのインスタンスのプロジェクトをパージすることです<a href="#">
。
<base>
本当に大きな違いを生み出し#
ます。指摘してくれてありがとう!
順序付けられていないリストは、メニューとして使用する目的で作成されることがよくありますが、li
リストアイテムはテキストです。リストli
項目はテキストであるため、マウスポインタは矢印ではなく、「Iカーソル」になります。ユーザーは、何かがクリック可能なときにマウスポインターの人差し指を見るのに慣れています。タグa
内でアンカータグを使用するli
と、マウスポインターが人差し指に変わります。リストをメニューとして使用するには、人差し指の方がはるかに優れています。
<ul id="menu">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
</ul>
リストがメニューに使用されていて、リンクが必要ない場合は、URLを指定する必要はありません。しかし問題は、href
属性を省略した場合、<a>
タグ内のテキストがテキストとして表示されるため、マウスポインターがIカーソルに戻ることです。Iカーソルは、メニュー項目がクリック可能ではないとユーザーに思わせる場合があります。したがって、まだが必要ですが、href
どこへのリンクも必要ありません。
メニューリストにはたくさんのタグdiv
やp
タグを使用できますが、マウスポインタもそれらのIカーソルになります。
メニューリストには、多数のボタンを積み重ねて使用することもできますが、リストの方が望ましいようです。そして、それがおそらくhref="#"
、リストタグ内のアンカータグでどこも指さないものが使用される理由です。
CSSでポインターのスタイルを設定できるため、これも別のオプションです。href="#"
どこにはいくつかのスタイルを設定するための怠惰な方法かもしれません。
空のリンクにhref = "#"を使用する場合の問題は、ページの上部に移動するため、目的のアクションではない可能性があることです。これを回避するには、古いブラウザまたはHTML5以外のdoctypeの場合、
<a href="javascript:void(0)">Goes Nowhere</a>
私の知る限り、これは通常、JavaScriptが添付されたリンクのプレースホルダーです。リンクの要点は、JavaScriptコードを実行することによって提供されます。JSをサポートするブラウザは、実際のリンクターゲットを無視します。ブラウザーがJSをサポートしていない場合、ハッシュマークは本質的にリンクをノーホップに変換します。控えめなJavaScriptも参照してください。
他の回答のいくつかが指摘しているように、a
要素にはhref
属性と#
はプレースホルダーとして使用されが、これも歴史的な成果物です。
href
これは、ハイパーテキストソースリンクを定義するアンカーの単一の必須属性でしたが、HTML5では不要になりました。この属性を省略すると、プレースホルダーリンクが作成されます。href属性は、リンクターゲット(URLまたはURLフラグメント)を示します。URLフラグメントは、ハッシュマーク(#)が前に付いた名前で、現在のドキュメント内の内部ターゲットの場所(ID)を指定します。
また、HTML5 仕様に従って:
a要素がhref属性を持たない場合、要素は、要素のコンテンツのみで構成される、関連性があった場合にリンクが配置された可能性のある場所のプレースホルダーを表します。
href属性は、リンクのリソースのURLを定義します。アンカータグにhrefタグがない場合は、ハイパーリンクになりません。href属性には次の値があります。
1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.
Note: When we do not need to specified any url inside a anchor tag then use
<a href="javascript:void(0)">Test1</a>