Question

基本上，我想要与oldschool html'frameset'相同的效果。

请看一下这页： http://onomadesign.com/wordpress/identity-design/alteon-a-boeing-company/

如果用户从行业中选择项目 - ＆gt;例如，我希望当新项目页面出现时，右滚动菜单保持其初始状态。因此，他们不会迷路，必须再次点击进入相同的子菜单部分。

因此，正确的缩略图导航应该保持相同的方式，我不希望它重新加载。

我是否必须使用框架或iframe？或者我可以做一些jQuery调用'不重新加载'那个div？也许PHP？对不起，我不是来自原籍的程序员。

更新

伙计们，我设法将整个缩略图导航代码放入一个单独的php文件，名为sidebar.php。现在通过<?php get_sidebar(); ?>在我的single.php（Wordpress）中调用它。

现在是否应该更容易使这个sidebar.php不刷新页面重新加载？我一直在看cookie，php会话，iframe ......但是我无法让它工作。

非常感谢任何帮助！

Answer 1

Facebook有点为了优化而没有框架这样做。它们采用每个链接，如果支持，则使用AJAX加载页面内容而不重新加载布局。

显然，这类事情可能需要对您的应用内部进行重大重组。另一种选择是简单地将菜单的状态存储为链接点击时的cookie（参见jQuery Cookie plugin），并且在每次重新加载时，要么让Javascript查看cookie并动态地将菜单恢复到正确的状态，要么使用内部PHP读取cookie并决定显示哪个菜单。

但是如果你真的很绝望，你可能会最终落后于镜架。有时这可能没问题 - 但首先尝试其他一切：）

Answer 2

您还可以检测到哪个菜单项已激活（由于点击了相应的链接而获得了页面请求）并使用此信息来恢复/选择此菜单项。

至少这就是我所做的......不需要cookie或AJAX！

Answer 3

您可以使用称为“AHAH”异步HTML和HTTP的技术。基本上你正在做一个jQuery

$.post("whatever.html",function(data) {
       $("contentdivelement").html(data);
}

您可以将其包装在以下函数中：

updateContent(sPage) {
   $.post(sPage,function(data) {
       $("contentdivelement").html(data);
} 
}

这会将“框架”页面中的内容加载到div而不重新加载页面。

您还可以绑定到每个导航链接，并使用他们的HREF作为加载内容div的路径，例如：

$(".menuLink").click(function() {
   var menuLink = $(this).attr('href');

   updateContent(menuLink);

   /* prevents the browser from taking the parent to that link */
   return false;

});

此外：您的菜单可能如下所示：

<ul class="myMenu">
   <li><a href="frame1.html" class="menuLink">Frame 1</a></li>
   <li><a href="frame2.html" class="menuLink">Frame 2</a></li>
</ul>

另外，如果您想要它记住您所在的页面，您可以使用cookie或#anchors。有很多方法可以添加“tab”或“menu”锚点，但只有一种方法就是使用jQuery插件。

最常见和最直接的方法是使用#anchors。你的浏览器地址栏屁股＃frame1到最后，所以当页面刷新或重新加载时，它会自动加载“frame1”并附加一些代码。

您甚至可以调用锚点＃/ frame1.html并在

中读取锚点

$(document).ready(function() {
   /* you'll need to either use a plugin or parse out the anchor from your current browser address bar */
   updateContent(anchorContentVar);
});

Answer 4

我建议采用稍微不同的方法，而不是使用点击处理程序更新您的内容。只需用这种链接替换你的超链接：

 #info_page

现在设置一个简单的时间间隔，读取当前的URL并相应地更新DIV：

__LOC = document.location.href;
 setInterval(function(){
 if (__LOC!=document.location.href) __LOC=document.location.href;
  var fetchURL = __LOC.split("#")[1];
  $.get( "/getcontent/"+fetchURL, function(d){ $("#mydiv").html( d ); } )
 } 1000);

这样访问者也可以使用书签。

保持重新加载div

更新

4 个答案: