Question

我想帮助解决我遇到的问题。我有一个我建立的网站，在菜单上的文字下方我希望有一个滑块。

像这样：DEMO（我没有写这段代码而且我不记得我在哪里找到它。）

Javascript代码。

$('li').click( function() { 
$('.active').removeClass('active');
$(this).addClass('active');
var top = $(this).offset().top + $(this).height() + 10;
var left = $(this).offset().left;
$('#marker').stop().animate( { top: top, left: left  }, 400 );
});

$('li:first').trigger('mouseover');
$('#marker').fadeIn();

这只是我导航菜单的样子。我遇到的问题是我想在我的网站上设置滑块（但我会让它看起来更好看）并且问题是当你点击其中一个链接（例如主页按钮）时它会加载新的HTML文件，这将滑块滑动不顺畅。当你在不同的页面上时，你不会看到滑动动画只是滑块改变位置。

我尝试使用frameset（frameset）来解决这个问题并且它有效，但问题是frameset使URL无法更新，我讨厌这样，这不是我解决这个问题的方式。

我需要你的帮助是我如何解决这个问题。我一直在寻找解决方案，但我没有找到任何解决方案，但我认为我需要使用JQuery或Javascript。

如果您没有时间阅读：

我想要一个解决方案，在单击菜单按钮而不是重新加载整个页面时，如何创建一个加载内容的网站，只需重新加载加载新内容的部分。所有这一切都会更新URL（例如，如果你在主页上它会说/home.php，如果你在about页面上它会显示/about.php，依此类推）。

提前致谢。 // DeeLaY

Answer 1

您需要的是HTML5 History API（pushState）和AJAX的组合。

简单的jQuery AJAX（GET）：http://api.jquery.com/jQuery.get/ 关于操纵历史：https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

这是一个粗略的入门教程：http://net.tutsplus.com/tutorials/html-css-techniques/a-first-look-at-the-history-api/

这是一个关于你要求的工作演示：http://html5demos.com/history

编辑：修复了最后一个链接。

Answer 2

你可以使用jquery或javascript（ajax）中存在的方法并根据你想要与之关联的事件加载你的页面例子

$("buttonX").click(function(){

    $('#container').load('pageX.html');
});

更改URL时加载内容而不刷新页面

2 个答案: