web-dev-qa-db-ja.com

空のhrefを持つ<a>リンクを作成する最良の方法

リンクを作成し、javaScriptを使用してリンクアンカーを強制するには、次のことを試しました。

<a id="ServerSort" href="#" style="text-decoration:underline">

うまくいきましたが、<a>リンクをクリックすると、ページは現在の位置を失います。

Hrefを表示するにはリンクが必要です。カーソルを移動するときにマウスを使用してカーソルを変更する必要があるためですか。

誰でもアドバイスできますか？

javascriptjqueryhtmlcsshtml5
35
John John

これを行う最善の方法は、次のようにhrefを_#0_に設定することです。

_<a href="#0">blabla</a>_

理由は次のとおりです。ID0のページには何も表示されません（その場合は問題が発生します）。また、_#0_が存在しないので、クリックイベントが表示されます。ページのトップ。これを行うためにJavaScriptは必要ありません。JavaScriptを使用しないでください。

20
Bene
 .clickable {
   cursor: pointer;
 }
 <a id="ServerSort" class="clickable">Foo</a>
4
James Sumners

いくつかのオプションがあります：

<a id="ServerSort" href="javascript:">

<a id="ServerSort" href="javascript://">

<a id="ServerSort" href="javascript:void(0)">

これらは悪い習慣と見なされており、本番環境でこのようなものを推奨することは決してありません。通常、開発段階で存在しないページにリンクする場合は、最初のオプションを使用します。

できれば、まったく使用せず、次の例のスパンに切り替えます。

<span id="ServerSort" onclick="return false">Test Link</span>

それに応じて要素をスタイルします：

    <style type="text/css">
    #ServerSort {
        text-decoration:underline;
    }
        #ServerSort:hover {
            color:red;
            cursor:pointer;
        }
</style>

私はjsをインライン化し、デフォルトの動作をオーバーライドする必要を回避する別のアプローチを示すためにここに手書きします。

4
justinlabenne

あなたが試すことができます：

<a id="ServerSort" href="#" style="text-decoration:underline" onclick='return false'>

または、jQuery event.preventDefault（） を使用できます。

2
Aray