jQuery基於哈希的導航與jquery-bbq使頁面跳轉

我有一個網站在www.tinytoepress.com使用#hash基於錨定標記的導航，使用jQuery和jquery-bbq插件。它的效果很好，除了有時會導致頁面跳到標題下方，就好像它正在轉到實際的<a name...>標記。但是沒有這樣的標籤。jQuery基於哈希的導航與jquery-bbq使頁面跳轉

例如，使用Chrome OS X上，如果我瀏覽網頁：

http://www.tinytoepress.com/

，然後點擊左上角的「商店」的鏈接，我去：

http://www.tinytoepress.com/#store

但是，我滾動下面的標題，這是不希望的。我想保持在頂端。

如果我向上滾動並點擊「關於」，我會進入關於頁面，但我再次滾動瀏覽標題。但是，如果我現在向上滾動到頂部並再次單擊「存儲」，我將無需向下滾動即可進入「存儲」狀態，這是所需的。

我正在使用簡單的.show()和.hide()方法來控制從導航點擊設置的div的可見性。

任何想法如何防止在頁面跳轉？

來源

2013-12-08 mrjf

當哈希地址改變默認瀏覽器的行爲是跳轉到該代表的ID哈希值。例如：http://example.com/some-page#store將在頁面上搜索ID爲store（<div id="store">...</div>）的元素。如果找到了，頁面將跳到那裏。

而不是設置id屬性，我建議您設置自定義data-attr屬性。

<div id="store">...</div>將成爲<div data-page="store">...</div>和jQuery的方面，你將取代$(location.hash).show()有：

$("[data-page='" + location.hash.substring(1) + "']").show()

的代碼如下所示：

$("a").on("click", function() { 

    // get the clicked link 
    var $clickedLink = $(this); 

    // get the url 
    var url = $clickedLink.attr("href"); 

    // we search the hashes 
    if (url[0] !== "#") { return; } 

    // change the location using js 
    location.hash= url; 

    // hide all pages 
    $("[data-page]").hide(); 

    // show the current page 
    $("[data-page='" + url.substring(1) + "']").show(); 

    // prevent the default browser behaviour (jumping) 
    return false; 
});

JSFIDDLE

來源

2013-12-20 13:24:44

謝謝。我不知道#foo也會以<... id =「foo」>爲目標 - 我認爲它只適用於。非常好知道。謝謝，我非常欣賞這些信息！ – mrjf

關於這個正確答案的更多上下文來自イオニカビザウ：http://stackoverflow.com/questions/484719/html-anchors-with-name-or-id – mrjf

@mrjf不客氣。我很高興我幫助你。謝謝！ –

很抱歉，無法複製您的問題（使用Google Chrome 31.0.1650.63運行OS X 10.9）。您怪異的跳躍可能的解釋：有時候，改變的內容長度也發揮了作用，裝載和插入新內容時...

來源

2013-12-17 13:37:47 Kjell

感謝您的支持！很高興聽到你不能複製。 – mrjf

@mrjf我可以理解你的問題。你看到[我的答案]（http://stackoverflow.com/a/20704652/1420197）？ –

我認爲它可能是與每次點擊導航時這些代碼如何添加和刪除iframe相關。我發現如果允許iframe完全加載頁面跳轉不會發生。在我的chrome工具中，如果我刪除了iframe，跳躍就會一起停止。我可能在這裏是錯誤的，但如果你只是在點擊導航時顯示和隱藏頁面內容，應該不需要將iframe存儲在Jquery對象中，然後將其放回到同一個div容器中。當iframe放回Iframe內的所有調用以再次獲得js資源時。當用戶點擊不同的導航元素時，這些調用會中斷。查看Chrome工具的網絡選項卡，在點擊所有導航後，您將看到取消資源被取消，另一個在狀態列中有206個部分內容。我的建議是加載Iframe一次，然後在需要時隱藏內容。我希望這是有益的祝你好運。

b = $("#movieCtn").html(), console.log("html: ", b), $("#movieCtn").html(""), console.log(b,$("#movieCtn").html()), $("#movieCtn").html(b))

來源

2013-12-20 20:12:53 jtaz

謝謝，這是一個很好的理論。它並沒有最終解決我的問題，但我很欣賞這個想法。順便說一句，我顯示和隱藏iframe重置電影播放器的原因。不幸的是，這是我發現在div被隱藏後阻止它播放的最簡單的方法。 – mrjf

jQuery基於哈希的導航與jquery-bbq使頁面跳轉

回答

相關問題