动态替换水平滚动的内容

Question

到目前为止，我有一个动态索引页面，其中包含一个替换内容的导航。

内容将是可点击的图像，并沿水平方向滚动到下一张图像。

在此页面上http://intelligen.info/test/index.html您可以看到替换内容的动态索引页面。我发现这个博客的代码http://css-tricks.com/dynamic-page-replacing-content/

内容是可点击的图像，水平滚动到下一张图像。图像在索引页上滚动的很好，但在内容被替换时不起作用。例如看到这个页面http://intelligen.info/test/index.html#paul-smith.html但是这个链接到paul smith页面根本不加载内容。您可能需要点击“工作”>“伦敦时装周”>“保罗史密斯”才能查看此页面。

如何获取替换内容上滚动的图像？

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：在左侧的菜单也是直观，目前还不清楚其子菜单打开，这是家长来电者...}