web-dev-qa-db-ja.com

どこにも行かないリンクを作成するにはどうすればよいですか

何もしないリンクを作成することは可能ですか?アイテムをリンクにしたいので、マウスオーバーでカーソルを変更できますが、同じページで追加機能を備えたdivの表示を実際にトリガーするため、リンクが実際にどこにも行かないようにします。

54
Ankur

ブラウザの履歴に追加します:

<a href="#"></a>

ブラウザの履歴に追加しない(推奨される方法):

<a href="javascript:;"></a>

105
leepowers

代わりに、<span>を使用してカーソルスタイルを設定できます。

<span id="node42" class="node-link">My Text</span>

そしてスタイルシートでカーソルを指定します:

.node-link { cursor: pointer; }

これにより、後でアクションのためにノードにアタッチすることもできます( Prototype を使用してここに表示):

<script type="text/javascript">
    $('node42').observe('click', function(event) {
      alert('my click handler');
    });
</script>
17
jheddings

私の意見では、最も完全なハックフリーソリューション:

<a href="" onclick="return false;">do absolutely nothing</a>
15
pstanton

スタイルを追加するだけでcursor:pointer要素に:

<a id="clickme">Click Me</a>

CSS:

#clickme { cursor: pointer }

または(天国では禁止)インライン:

<a style="cursor:pointer">Click Me</a>
7
Doug Neiner

以下に、2つのclassic javascriptアプローチを示しますエラーを表示しないJS-console =および/またはURLを変更せず、ブラウザの履歴に保存しない:

<a href="javascript:void(0);">Click on this javaScript error-free link that won't change your URL nor save it into your browser history</a><hr />
<a href="#void">Maybe a more readable approach, but unfortunately this one changes your URL</a>
3

スタイルだけが必要な場合は、CSS cursor property をポインターに設定します。

ただし、<a href="javascript:void(do_something())">が必要なようです。

2
Roger Pate

1つのオプションは#someidを指すことです-それはその要素に垂直スクロールしますが、それはあなたが望むものであるかもしれません。

追伸スタイルを使用しても同じ結果を得ることができます。

1
eglasius

もっとシンプルなものを探していましたが、見つけたと思います。リンクをどこにも行かないようにしたいですか? hrefを省略します。

<a class='irrelevant_for_this_example'>Some text</a>

href="#"は、ページの上部までスクロールします。

href="javascript:;"は危険なようです。

JSソリューションは、単純なものには不要のようです。

1
Miguel Madero