Question

到目前为止，我有一个带有导航的动态索引页面，用于替换内容。

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

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

内容是可点击的图像，可以水平滚动到下一个图像。图像在索引页面上滚动正常，但在替换时不能处理内容。例如，请参阅此页面http://intelligen.info/test/index.html#paul-smith.html但是，保罗史密斯页面的链接根本不会加载内容。您可能需要点击“工作”＆gt; '伦敦时装周'＆gt; 'paul smith'来查看此页面。

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

Answer 1

您正在注册hashchange

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

但您还在图片主页上使用了#

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

点击会触发同一事件。

因此您需要考虑您的网页可用性和用户界面（用户界面）。
用户单击图像以使内容滑块前进不常见......

一个解决方案是重新考虑这个概念，我会在页面两侧添加两个漂亮的花式箭头 - 滑块。

或者您可能希望对图片上触发的任何点击进行event.preventDefault()

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

希望阻止hashchange事件触发。希望这有助于发现这个问题。

_{P.S：左侧的菜单也不直观，不清楚哪个子菜单是打开的，哪个是父母来电...}

动态替换内容水平滚动的内容

1 个答案: