防止 href="#" 鏈接更改 URL hash

Question

我有一個站點已經利用 URL 中的 hash 並且我不希望它改變。 當我使用 Zurb Foundation 並使用href="#"作為菜單項時，單擊它會刪除以前的 hash 值。

如何覆蓋此行為？

更新：我認為最好保留元素，因為當我更改它時，它會更改綁定到該 HTML 元素的樣式。 在使用設計框架時，我總是更喜歡保持默認約定，而不是混淆覆蓋 css 屬性。

謝謝。

Answer 1

您可以監聽點擊事件並調用preventDefault來阻止瀏覽器設置哈希。

jQuery 示例：

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

Answer 2

請閱讀漸進增強和非侵入式 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> ，並認真考慮使用 JavaScript/DOM 而不是 HTML 將其添加到文檔中。

（注意：相當多的人希望支持不識別classList或addEventListener舊瀏覽器，檢查瀏覽器支持和查找兼容性例程留給讀者作為練習。使用 YUI、jQuery 或類似的方法是處理兼容性的一種方法.)

Answer 3

相反，具有#在HREF，您可以使用javascript:; 在 href 中，它不會讓 url 改變。

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

Answer 4

使用“javascript:void(0)”代替“#”，請參閱此鏈接以獲取更多信息， 我應該將哪個“href”值用於 JavaScript 鏈接，“#”還是“javascript:void(0)”？

Answer 5

只需使用這個：

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

Answer 6

我已完成以下操作以防止所有帶有 href="#" 屬性的標簽執行導航（使用 JQuery）：

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

        });

Answer 7

這對我有用。

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

Answer 8

在您的默認庫中有以下代碼。
這將在點擊事件中獲取 href 值，如果找到哈希 (#) 值，那么它將阻止默認事件，這將避免重定向到 href 值。

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

Answer 9

最簡單的方法是<a href="#hash" onclick="event.preventDefault();"></a>

Answer 10

我的解決方案有點相同，使用 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>

Answer 11

我遇到的最短的就是使用語句結束字符：

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

Answer 12

我最近才選擇它，但是我嘗試從標簽中刪除href屬性complete，並且效果很好。 裝的

<a href="#" onclick="something"></a>
    use 
<a onclick="something"></a>