「＃」リンクのクリックがページの先頭にジャンプしないようにするにはどうすればよいですか？

現在<a>、jQueryでタグを使用して、クリックイベントなどを開始しています。

例は <a href="#" class="someclass">Text</a>

しかし、「＃」によってページがページの先頭にジャンプするのが嫌いです。代わりに何ができますか？

jQueryでは、クリックイベントを処理するときに、 リンクが通常の方法で応答しないようにするには、falseを返しますhref属性にアクセスするというデフォルトのアクションが行われないようにします（PoweRoyのコメントとErikの回答による）：

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});

これは古いですが...誰かが検索でこれを見つけた場合に備えて。

"#/"代わりに"#"を使用すると、ページがジャンプしません。

次のように書くこともできます。

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

私はそのより良い方法はわかりませんが、それは方法です:)

ソリューション＃1：（プレーン）

<a href="#!" class="someclass">Text</a>

ソリューション＃2：（必要javascript）

<a href="javascript:void(0);" class="someclass">Text</a>

ソリューション＃3：（必要jQuery）

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>

event.preventDefault()これを回避するために使用できます。詳細については、http：//api.jquery.com/event.preventDefault/をご覧ください。

ただ、使用<input type="button" />の代わりに、<a>あなたが望むなら、それはリンクのように見えるようにスタイルにし、使用CSSを。

ボタンはクリック専用に作成されており、href属性を必要としません。

最善の方法は、onloadアクションを使用してボタンを作成し、javascriptを介して必要な場所に追加することです。そのため、javascriptを無効にしても、ボタンはまったく表示されず、ユーザーを混乱させません。

を使用href="#"すると、同じ場所を指す多数の異なるリンクが表示されますが、エージェントがJavaScriptをサポートしていない場合は機能しません。

アンカーを使用したい場合は、提案されている他の回答と同様にhttp://api.jquery.com/event.preventDefault/を使用できます。

スパンなどの他の要素を使用して、それにクリックイベントをアタッチすることもできます。

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

IDとしては許可されていないため#0、href を使用できます0。ページはジャンプしません。

<a href="#0" class="someclass">Text</a>

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

使うだけ

<a href="javascript:;" class="someclass">Text</a>

JQUERY

$('.someclass').click(function(e) { alert("action here"); }

要素に意味のあるhref値がない場合、それは実際にはリンクではないので、代わりに他の要素を使用しないのはなぜですか？

Neothorによって提案されているように、スパンも同様に適切であり、正しくスタイル設定されていれば、クリック可能なアイテムとして目に見えて明白になります。ホバーイベントをアタッチして、ユーザーのマウスがその上に移動すると、要素が「ライトアップ」されるようにすることもできます。

ただし、これを述べたとしても、JavaScriptがなくても機能するようにサイトのデザインを再考したい場合がありますが、JavaScriptが利用可能な場合はJavaScriptによって拡張されます。

ほとんどの場合、href = "＃"のリンクはボタン要素に置き換える必要があります。

<button class="someclass">Text</button>

これらのリンクはスクリーンリーダーに表示されるため、href = "＃"でリンクを使用することもアクセシビリティの問題です。スクリーンリーダーは「リンク-テキスト」を読み上げますが、ユーザーがクリックするとどこにも移動しません。

hrefプロパティなしでアンカータグを渡すだけで、jQueryを使用して必要なアクションを実行できます。

<a class="foo">bar</a>

利用した：

<a href="javascript://nop/" class="someClass">Text</a>

の #/トリックは動作しますが、ブラウザに履歴イベントを追加します。そのため、ユーザーが望む/期待する可能性があるため、戻るをクリックしても機能しません。

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); これは、既存のコンテンツ、およびロード後にDOMに追加された要素に対して機能するため、私が行った方法です。

具体的には、.btn-group（Reference）内のブートストラップドロップダウンメニューでこれを行う必要があるため、次のようにしました。

$('body').click('.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });

このようにしてターゲットにされ、ページの他のものには影響を与えませんでした。

私はいつも使ってきました：

<a href="#?">Some text</a>

ページジャンプを防止しようとするとき。これが最高かどうかはわかりませんが、何年もうまく機能しているようです。

JavaScriptを使用せずにページがトップにジャンプしないようにするには、同様の4つの方法があります。

オプション1：

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

オプション2：

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

オプション3：

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

オプション4（非推奨）：

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

ただしevent.preventDefault()、jQueryでクリックイベントを渡す場合に使用することをお勧めします。

jqueryの処理後にfalseを返すこともできます。

例えば。

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);

私はこのようなものを使用します：

<a href="#null" class="someclass">Text</a>

ページがジャンプしないようにするには、を呼び出したe.stopPropagation();後にを呼び出す必要がありますe.preventDefault();。

stopPropagationイベントがDOMツリーを上ることを防ぎます。詳細はこちら：https : //api.jquery.com/event.stoppropagation/

ページをジャンプアップせずに同じページのアンカーセクションに移行する場合は、次のようにします。

「＃」の代わりに「＃/」を使用するだけです。

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..

後に何かを追加する#と、そのIDを持つ要素にページのフォーカスが設定されます。最も簡単な解決策は、#/jQuery を使用している場合でも使用することです。ただし、jQueryでイベントを処理している場合event.preventDefault()は、次の方法です。

<a href="#!">Link</a>と<a href="#/">Link</a> 1回以上同じ入力をクリックしなければならない場合の仕事は...それだけで、複数の入力のそれぞれについて、1回のイベントクリックで取りません。

まだ行く最善の方法は <a href="#">Link</a>

その後、

event.preventDefault();