動態替換的內容水平滾動

Question

到目前為止，我有一個動態索引頁面，該頁面帶有替換內容的導航。

內容將是可單擊的圖像，並水平滾動到下一張圖像。

在此頁面http://intelligen.info/test/index.html上，您可以看到替換內容的動態索引頁面。 我從此博客http://css-tricks.com/dynamic-page-replacing-content/找到了代碼

內容是可點擊的圖像，可水平滾動到下一個圖像。 圖像在索引頁上滾動良好，但在替換后的內容上不起作用。 例如，請參見此頁面http://intelligen.info/test/index.html#paul-smith.html但是，指向保羅·史密斯頁面的此鏈接根本不會加載內容。 您可能需要單擊“工作”>“倫敦時裝周”>“保羅·史密斯”才能查看此頁面。

如何使圖像在替換的內容上滾動？

Answer 1

您正在注冊一個hashchange

$(window).bind('hashchange', function(){

但您還在圖片錨點上使用了#

<div id="image-1">
    <a href="#image-2"><img></a> <!-- HERE'S THE ISSUE -->
</div>

點擊一下就會觸發相同的事件 。

因此，您需要考慮頁面的可用性和UI （ 用戶界面 ）。
用戶單擊圖像以使內容滑塊前進是不常見的...

一種解決方案是重新考慮這個概念，我將在頁面兩邊添加兩個漂亮的花式箭頭-滑塊。

或者您可能想在圖像上觸發的任何點擊上使用event.preventDefault()

$("#main-content").on("click", "a[href^='image-']", function( event ){
   event.preventDefault();
});

希望防止hashchange事件觸發。 希望這有助於發現問題。

_{PS：左側的菜單也不是很直觀，不清楚打開哪個子菜單以及哪個是父調用者...}