0

我想为我遇到的问题提供帮助。我有一个我建立的网站，在菜单上的文本下方我想要一个滑块。

像这样：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）解决这个问题，但问题是框架集导致 URL 不更新，我讨厌这样，所以这不是我解决这个问题的方法。

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

如果你没有时间阅读：

我想要一个关于如何制作一个网站的解决方案，该网站在您单击菜单按钮而不重新加载整个页面时加载内容，只重新加载您加载新内容的部分。所有这一切，它会更新 URL（例如，如果你在主页上，它会说 /home.php，如果你在关于页面上，它会说 /about.php 等等）。

提前致谢。// 迪莱

4

2 回答 2

2

您需要的是 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

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

于 2013-09-10T18:01:17.667 回答
-1

您可以使用 jquery 中存在的方法或仅使用 javascript(ajax) 并根据您希望将其与示例相关联的事件加载页面

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

    $('#container').load('pageX.html');
});
于 2013-09-10T17:58:03.097 回答