web-dev-qa-db-ja.com

jQueryハイパーリンク-href値？

私のWebサイトでは、jQueryを使用して要素のイベント、つまりハイパーリンクをフックします。これらのハイパーリンクは現在のページでのみアクションを実行し、どこにも導かれないため、「＃」のhref属性を次の場所に入れています。

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

ただし、一部のブラウザでは、これによりページが右から上にスクロールしますが、これは明らかに望ましくない動作です。空白のhref値を使用するか、値を含めないようにしましたが、ホバーしてもマウスはハンドカーソルに変わりません。

そこに何を入れればいいですか？

jqueryhyperlinkhref
45
Tom
_$('a').click(function (event) 
{ 
     event.preventDefault(); 
     //here you can also do all sort of things 
});
_

その後、必要なものをすべてhrefに入れると、jQueryがpreventDefault()メソッドをトリガーし、その場所にリダイレクトされません。

51
Bogdan Constantinescu

クリックイベントを提供するためだけに存在するが、実際には他のコンテンツにリンクしない「アンカー」は、実際にはbutton要素である必要があります。

次のようにスタイル設定できます。

<button style="border:none; background:transparent; cursor: pointer;">Click me</button>

そしてもちろん、ブラウザがトップにジャンプすることを心配することなく、onclick = "return false;"などの余分なjavascriptを追加することなく、クリックイベントをボタンにアタッチできます。またはevent.preventDefault（）。

39
talentedmrjones

そこに実際のリンクを実際に配置する必要があります。私はつまらない人のように聞こえたくありませんが、それに入るのはかなり悪い習慣です。 JQueryとAjaxは、常に最後に実装する必要があります。どこにも行かないリンクがある場合、それは正しく行われていません。

私はあなたのボールをつぶすつもりはありません。

36
gargantuan

なぜ_<a href>_を使用するのですか？私はこのように解決します：

_<span class='a'>fake link</span>_

そしてそれをスタイルします：

_.a {text-decoration:underline; cursor:pointer;}_

JQueryで簡単にアクセスできます。

$(".a").click();

11
bart

クリックハンドラの最後にfalseを追加します。これにより、ページをリダイレクトしようとするブラウザのデフォルトハンドラが発生しなくなります。

$('a').click(function() {
// do stuff
return false;
});
9
roryf

jqueryを使用すると、「＃」が付いているものだけにアクセスすることができます。

$('a[href=#]').click(function(){return false;});

最新のjquery（1.3.x）を使用する場合、ページが変更されたときに再度バインドする必要はありません。

$('a[href=#]').live('click', function(){return false;});
5
djspark

<a href="#" ></a>の代わりに<a href="javascript:void(0)" ></a>を使用する必要があります

4
mohsen

ここで先に誰もそれを言っていないのはなぜだろう：<a href="#">がドキュメントの位置を一番上にスクロールするのを防ぐには、代わりに<a href="#/">を使うだけです。それは単なるHTMLであり、JQueryは必要ありません。 event.preventDefault();の使用は多すぎる！

3
Best

私はこれが古いことを知っていますが、すごい、そのような簡単な解決策があります。

「href」を完全に削除し、次のことを行うクラスを追加します。

.no-href { cursor:pointer: }

以上です！

1
Justin

I ほとんどこの問題がありましたそしてそれは非常にdeceivingでした。誰かが私の同じ立場になった場合の答えを提供しています。

  1. 私thoughtこの問題があった
  2. しかし、私はreturn falseとjavascript：void（0）;を使用していました。
  3. その後、問題の明確な違いが浮上し続けました。
  4. 私はそれが一番上まで行かないことに気付きました-そして、私の問題のゾーンはページの一番下近くにあったので、このジャンプは奇妙で迷惑でした。
  5. 私はfadeIn（）[jQueryライブラリ]を使用していたことに気付きました。
  6. そして、私のコンテンツはページの範囲を広げました！ジャンプのように見えるものを引き起こす！
  7. 可視性の非表示トグルを使用するようになりました。

これがジャンプで立ち往生している人を助けることを願っています!!

0
amurrell