アンカータグが何も参照しないようにする方法は？

私はjQueryを使用していますが、一部のアンカータグで何も実行しないようにする必要があります。

私は通常、次のように書きます。

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

ただし、これはページの上部を指します！

何かをポイントしたくない場合は、おそらく<a>（アンカー）タグを使用しないでください。

リンクのように見えるものをリンクのように動作させたくない場合は、適切な要素（など<span>）を使用し、CSSを使用してスタイルを設定するのが最善です。

<span class="fake-link" id="fake-link-1">Am I a link?</span>

.fake-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

また、この質問に「jQuery」というタグを付けたとすると、クリックイベントハンドラーを添付することを想定しています。その場合は、上記と同じことを行い、次のJavaScriptのようなものを使用します。

$('#fake-link-1').click(function() {
    /* put your code here */
});

完全ではないソリューションがいくつかあります。

1.偽のアンカーにリンクする

<a href="#">

問題：リンクをクリックするとページの上部に戻る

2.「a」以外のタグを使用する

スパンタグを使用し、jqueryを使用してクリックを処理する

問題：キーボードナビゲーションが壊れ、手動でホバーカーソルを変更する必要がある

3. JavaScriptのvoid関数へのリンク

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

問題：IEで画像をリンクすると壊れる

解決

これらすべてに問題があるため、私が解決した解決策は、偽のアンカーにリンクし、onClickメソッドからfalseを返すことです。

<a href="#" onClick="return false;">

最も簡潔なソリューションではありませんが、上記の方法のすべての問題を解決します。

何もしないようにするには、これを使用します。

<a href="javascript:void(0)"> ... </a>

これを処理する正しい方法は、リンクを処理するときにjQueryでリンクを「切断」することです。

HTML

<a href="#" id="theLink">My Link</a>

JS

$('#theLink').click(function(ev){
    // do whatever you want here

    ev.preventDefault();
    ev.stopPropagation();
});

これらの最後の2つの呼び出しは、ブラウザがクリックを解釈するのを停止します。

これを行うには多くの方法があります

追加およびhref属性付けしない

<a name="here"> Test <a>

あなたのようなhrefの代わりにonclickイベントを追加することができます

<a name="here" onclick="YourFunction()"> Test <a>

または、あなたはこのようなvoid関数を追加することができます

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

無意味とはどういう意味ですか？

<a href='about:blank'>blank page</a>

または

<a href='whatever' onclick='return false;'>won't navigate</a>

あなたは試すことができると思います

<a href="JavaScript:void(0)">link</a>

ここで私が目にする唯一の問題は、高レベルのブラウザセキュリティがJavaScriptの実行時にプロンプ​​トを表示する可能性があることです。

これはより簡単な方法の1つですが

<a href="#" onclick="return false;">Link</a>

これは慎重に使用する必要があります

いくつかのポインタについては、この記事をお読みくださいhttps://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void

この回答は、新しいWeb標準（HTML5）を反映するように更新する必要があります。

この：

<a tabindex="0">This represents a placeholder hyperlink</a>

...は有効なHTML5です。tabindex属性は、通常のハイパーリンクのようにキーボードでフォーカスできるようにします。span前述のように、この要素を使用することもできますが、この要素を使用するa方がエレガントです。

参照：https : //w3c.github.io/html-reference/a.html
およびhttps://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href

<a>タグのhrefタグプロパティが何も参照しない3つの方法を次に示します。

<a href="JavaScript:void(0)"> link </a>

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

<a href="#" onclick="return false;"> Link </a>

これは古い質問であることは知っていますが、とにかく2セント追加すると思います。

それはリンクが何をするかによって異なりますが、通常、たとえばボックスポップアップを少し作成している場合は、同じことを表示/実行している可能性のあるURLにリンクをポイントします。

<a id="about" href="/about">About</a>

次に、jQuery

$('#about').click(function(e) {
    $('#aboutbox').show();
    e.preventDefault();
});

このようにして、非常に古いブラウザー（またはJavaScriptが無効になっているブラウザー）は別のaboutページに移動できますが、さらに重要なことに、Googleはこれも取得して、aboutページのコンテンツをクロールします。

停止したいすべてのリンクhref="#!"（または本当に必要なもの）があることを確認してから、これを使用します。

jq('body').on('click.stop_link', 'a[href="#!"]',
function(event) {
     event.preventDefault();
});

属性aなしでHTMLアンカー（タグ）を持つことができhrefます。オフのままにhref属性を＆それが何にもリンクしません。

<a>link</a>

私のために働いた唯一のものは、上記の組み合わせでした：

最初にulのli

<li><a onclick="LoadTab2_1()" href="JavaScript:void(0)">All Assigned</a></li>

次に、LoadTab2_1で手動でタブdivを切り替えました

$("#tabs-2-1").hide();
    $("#tabs-2-2").show();

これは、を切断するとタブ内のアクションも切断されるためです

また、メインのタブで変更があった場合は、手動でタブのスタイルを設定する必要があります

$("#secTab1").addClass("ui-tabs-active").addClass("ui-state-active").addClass("ui-state-hover").addClass("ui-state-focus");
    $("#secTab1 a").css("color", "#ffffff");

あなたはそれを行うことができます

<a style='cursor:pointer' >Link</a>

<a href="#" onclick="SomeFunction()"  class="SomeClass">sth.</a>

これは私のアンカータグでした。したがって、onClick = ""イベントでfalseを返すのは、ここでは役に立ちません。href = "＃"プロパティを削除したところ、以下のように機能しました

<a onclick="SomeFunction()"  class="SomeClass">sth.</a>

そして、私はこのCSSを追加する必要がありました。

.SomeClass
{
    cursor: pointer;
}

WordPressサイトでこの問題が発生しました。ドロップダウンメニューのヘッダーには常に属性がhref=""あり、使用されているヘッダープラグインは標準のURLのみを許可していました。最も簡単な解決策は、フッターでこのコードを実行することでした。

jQuery('[href=""]').click(function(e){
    e.preventDefault();
});

これは、空白のアンカーが何もしないようにします。

Reactはこのような関数をhref="javascript:void(0)"アンカータグで使用することをサポートしなくなりましたが、これはかなりうまくいくものです。

<a href="#" onClick={() => null} >link</a>

これはjQueryの質問としてタグ付けされていることは知っていますが、AngularJSでもこれに答えることができます。

要素にng-clickディレクティブを追加し、クリックイベントである$ event変数を使用します...デフォルトの動作を防止します。

<a href="#" ng-click="$event.preventDefault()">

$ event変数を関数に渡すこともできます。

<a href="#" ng-click="doSomething($event)">

その関数では、クリックイベントで必要なことをすべて実行します。