web-dev-qa-db-ja.com

href = "＃"リンクがURLハッシュを変更しないようにする

URLのハッシュを既に利用しているサイトがあり、変更したくない。 Zurb Foundationを使用し、メニュー項目にhref="#"を使用する場合、それをクリックすると以前のハッシュ値が削除されます。

この動作をオーバーライドするにはどうすればよいですか？

更新：要素を変更すると、そのHTML要素にバインドされているスタイリングが変更されるため、要素にとどまるほうが良いと思います。デザインフレームワークで使用するときは、CSS属性をオーバーライドして大量ではなく、デフォルトの規則を維持することを常に好みます。

ありがとう。

javascripthtmlzurb-foundation
39
Idan Shechter

プログレッシブエンハンスメント および 控えめなJavaScript をお読みください。

（ほとんど）決してhref="#"。未定義のアンカー（ページの上部になります）へのリンクです。 JavaScriptをぶら下げたいので、通常それを使用する人はそうします。

リンクを作成する場合は、どこか便利な場所を指定する必要があります。通常、これは、JavaScriptが提供するのと同じ効果を（それほど速くはありませんが）取得するためにサーバー側のテクノロジーを使用する別のページになります。その後、リンクの通常の動作を防ぐことができます。

例えば：

<a href="/foo/bar" class="whatever">Foo: Bar</a>

スクリプトで：

addEventListener('click', function (ev) {
    if (ev.target.classList.contains('whatever')) {
        ev.preventDefault();
        loadWithAjax(ev.target.href);
    }   
});

JavaScriptが、リンクで表現された同等の機能を持たないことを行う場合、そもそもリンクを使用するべきではありません。使う <button>、HTMLの代わりにJavaScript/DOMを使用してドキュメントに追加することを真剣に検討してください。

（注：かなり多くの人々が、classListまたはaddEventListenerを認識しない古いブラウザーをサポートしたいと考えています 互換性ルーチンを見つけることは、読者の課題として残されています。YUI、jQueryなどを使用することは、互換性を扱うための1つのアプローチです。

27
Quentin

クリックイベントをリッスンし、 preventDefault を呼び出して、ブラウザによるハッシュの設定を停止できます。

JQueryを使用した例：

$('.mylink').click(function(event){
    event.preventDefault();
});
40
Ben Hutchison

Hrefに#を使用する代わりに、hrefでjavascript:;を使用すると、URLを変更できません。

<a href="javascript:;">:Link</a>
30
Dead Man

「＃」を使用する代わりに、「javascript：void（0）」を使用してください。詳細については、このリンクを参照してください （0） "？

11
Chinmaya Hegde

単にこれを使用してください：

<a href="javascript:void()">text</a>
10
Abhishek Goel

これは私のために動作します。

$(document).on('click', 'a', function (e) {
    if ($(this).attr('href') == '#') {
        e.preventDefault();
    }
});
5
Mohamad Hamouday

Href = "＃"属性を持つすべてのタグがナビゲーションを実行するのを防ぐために、次のことを行いました（JQueryを使用）：

$('a[href$="#"]').click(function (event) {
            event.preventDefault ? event.preventDefault() : event.returnValue = false;

        });
4
Daniel Castillo

デフォルトのライブラリに以下のコードを用意してください。
クリックイベントでhref値を取得し、ハッシュ（＃）値が見つかった場合、href値へのリダイレクトを回避するデフォルトイベントを防止します。

$(document).on('click', 'a', function (e) {
    if ($('#'+e.target.id).attr('href')=='#') {
        e.preventDefault();
    }
});
2
Dorjee Karma

これを行う最も簡単な方法は<a href="#hash" onclick="event.preventDefault();"></a>です

1
Mark Ibanez

私の解決策は、Javascriptを使用して少し同じです。

->交換

<a href=#foo class="ouvrir">Newsletter</a>

沿って：

<a href="javascript://" class="ouvrir">Newsletter</a>

そして、Javascript：

<script>
    $('.ouvrir').click(function(event){
        window.location.href = "#foo";
        history.pushState('', document.title, window.location.pathname);
    });
</script>
1
Guillaume