如何保持元素不刷新

Question

主要目的是使徽标文本<div class="small-7 medium-4 columns logo">和菜单保持不刷新<nav class="pagedMenu" role="navigation">，而不会刷新页面或将内容从页面加载到另一个页面时。同样，菜单状态应从一个页面保存到另一个页面。

我在这里找到了可以解决问题的可行解决方案（
您可以使用ajax来获取更新的内容，并使用jQuery将新内容放到页面上，而完全避免刷新。这样做，页面将保持不变。 @ jfriend00）

因此，我尝试使用Ajax插件（称为[AWS）。在AWS选项页，我（想），我已经做了指向正确的事wrapper作为 阿贾克斯容器ID ，也pagedMenu作为
菜单的容器类 ， 过渡效果 已启用， 没有AJAX容器ID 空白，没有选择的装载机，其已经是一个脉冲装载机实现在主题。

在这一点上，我得到的只是菜单/侧面菜单（shiftnav）/脉冲点加载器/内容加载故障，可能是由错误定义的 Ajax容器ID 和/或 菜单容器类
（？）或与现有JS/ jQuery代码，不太确定。

同样在Chrome控制台中，有一个错误：

Uncaught SyntaxError: Unexpected token ;
(anonymous function) @ ajaxify.js?ver=4.3.1:175
n.extend.each @ jquery-2.1.4.min.js?ver=2.1.4:2
n.fn.n.each @ jquery-2.1.4.min.js?ver=2.1.4:2
$.bind.$.ajax.success @ ajaxify.js?ver=4.3.1:169
n.Callbacks.j @ jquery-2.1.4.min.js?ver=2.1.4:2
n.Callbacks.k.fireWith @ jquery-2.1.4.min.js?ver=2.1.4:2
x @ jquery-2.1.4.min.js?ver=2.1.4:4
n.ajaxTransport.k.cors.a.crossDomain.send.b @ jquery-2.1.4.min.js?ver=2.1.4:4

页面刷新一切恢复正常，但毫无用处，完全没有帮助。

我还必须提到，对于菜单，我尝试使用jQuery-Storage-
API来保持状态，storage=jQuery.sessionStorage;正如您在mynewmenu.js文件中所看到的[那样，但这不能解决非刷新元素问题。

仅菜单jsfiddle，如果这有助于获得整个图片

您可以使用此实时链接作为示例；与上述-
Ajax实现权限（？）相似，并且在外观上，菜单保持不翻页的状态。如果您浏览“ 书籍” ，“ 作品”
等，则会看到菜单部分；如果有可以在这里实现的模型，我将很高兴找到它。

LE：同时，我尝试了@arvgta提出的另一种ajaxify解决方案
-特别感谢-仍未成功，但据我从作者那里发现，定义的元素应该是div，其id不是类。因此，我将尝试找到一种以某种方式修改代码的方法，以便在类上具有ID。

另外，我将尝试在ajaxify.min.js文件中转换和实现page-container元素；jQuery('#page- container').ajaxify();我会回来的消息。

LE2：我尝试使用id而不是类来实现解决方案，但仍然无法正确加载页面。

至此，我们用以下几行更新了ajax.min.js文件：

(function($){

  jQuery(document).ready(function(){
    jQuery('#page-container').ajaxify({requestDelay:400,forms:false});
  });

})(jQuery);

另外，我还修改了主题文件，使其具有id=page-containerif class=page-container。

在这种情况下，单击菜单时，链接将被更改（应如此），菜单/徽标文本元素似乎几乎可以正常工作（有时会更改位置），但是在所有情况下均不能正确加载内容；同样，在手动刷新页面（f5）时一切恢复正常，但无济于事。

LE3：看来，Revolution Slider插件和Ajaxify之间至少有冲突。

“ errormessage =” Revolution Slider错误：您有一些jquery.js库包含在js包含革命文件之后。“ ; =“” +
=“ 这包括make消除了革命滑块库，并使其不起作用。“ <=”“ span =”“>”

网站现场链接在这里。在这个领域有什么想法/选择吗？（对使用其他不同平台，不同WordPress主题等不感兴趣，只是在这种情况下的解决方法）

LE4：据我所知，有很多用户投票支持JakeBown的答案，这的确可以解决。但我无法找到无法正确实现主题的原因（无错误），。实时链接元素徽标文本/菜单在刷新时仍在消失，没有保持刷新状态。有什么想法@JakeBown /任何人吗？

LE决赛。 考虑到我的站点环境（安装了插件等）， Buzinas给出 了最接近我需求的答案。

Answer 1

TL; DR

我已经为您制作了一个塞子，让您看一看，并[尽可能地使用它。您将从中学 到很多东西！

我认为您在这里尝试了太多事情，但没有尝试最简单的方法：

主要目标是使徽标文本和菜单保持不刷新，而不会在刷新页面或将内容从页面加载到另一个页面时进行裁剪。菜单状态也应从一个页面保存到另一个页面。

如果要这样做，请执行以下步骤：

• 创建一个“母版”页面，index.html从现在开始我们将调用该页面。
• 因此，索引必须具有页面的静态部分，例如菜单，徽标，页脚等。
• 那么，我们的“子页面”必须减少（无html，head，body，script，style标签，只将显示在我们的母版页内容）。

• 完成之后，现在我们必须更改链接以使用AJAX而不是进行完全刷新：

  /* we add a 'click' event handler to our menu */
  

  document.getElementById(‘menu-menu-2’).addEventListener(‘click’, function(e) {
  var el = e.target;
  

  / then, we see if the element that was clicked is a anchor /
  if (el.tagName === ‘A’) {
  / we prevent the default functionality of the anchor (i.e redirect to the page) /
  e.preventDefault();
  / we show our spinner, so the user can see that something is loading /
  spinner.classList.remove(‘hidden’);

  /* and we call our AJAX function, passing a function as the callback */
  ajax(el.href, function(xhr) {
    /* we get our main div, and we replace its HTML to the response that came
       from the AJAX request */
    document.getElementById('main').innerHTML = xhr.responseText;
    /* since the request was finished, we hide our spinner again */
    spinner.classList.add('hidden');
  });
  

  }
  });

• 好的，现在我们的页面已经可以通过AJAX运行，并且不会重新加载我们的静态内容。

但是现在，我们看到了一些问题。例如，如果有人尝试直接通过URL打开我们的页面之一，那么他将看到没有样式的页面，而没有菜单/徽标等。那么，我们应该怎么做？

现在，我们还有几个步骤：

• 使用History API模拟我们的链接在页面之间有效地传输：

  /* inside our ajax callback, we save the fake-redirect we made into the pushState */
  

  ajax(el.href, function(xhr) {
  document.getElementById(‘main’).innerHTML = xhr.responseText;

  / save the new html, so when the user uses the back button, we can load it again /
  history.pushState({
  html: main.innerHTML,
  title: el.textContent + ‘| neuegrid’
  }, ‘’, el.href);

  / (…) /
  });

  / and outside it, we add a ‘popstate’ event handler /
  window.addEventListener(‘popstate’, function(e) {
  / so, if we’ve saved the state before, we can restore it now /
  if (e.state) {
  document.getElementById(‘main’).innerHTML = e.state.html;
  document.title = e.state.title;
  }
  });

• 而且，当用户直接进入另一个页面（例如）时about-us，我们需要将其重定向到index.html，然后about-us从那里加载页面。

• 因此，我们创建了一个redirect.js文件，并在所有子页面中对其进行引用：

  /* save the page that the user tried to load into the sessionStorage */
  

  sessionStorage.setItem(‘page’, location.pathname);
  / and them, we redirect him to our main page /
  location.replace(‘/’);

• 然后，在我们的index.html页面中，查看中是否有任何页面sessionStorage，如果有的话，我们将其加载，否则，将加载我们的home页面。

  var page = sessionStorage.getItem('page') || 'home';
  

  / we look into the menu items, and find which has an href attribute
  ending with the page’s URL we wanna load /
  document.querySelector(‘#menu-menu-2 > li > a[href$=”’ + page + ‘“’).click();

就是这样，我们现在完成了。看看我给你做的矮人。

并尽可能地使用它，因此您将从中学到很多东西。

希望能对您有所帮助！:)

注意：仅供参考，这是我们的ajax功能：

function ajax(url, callback, method, params) {
  if (!method) method = 'GET';

  var xhr = new XMLHttpRequest();
  xhr.open(method, url);

  if (callback) xhr.addEventListener('load', function() {
    callback.call(this, xhr);
  });

  if (params) {
    params = Object.keys(params).map(function(key) {
      return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
    }).join('&');
    xhr.send(params);
  } else {
    xhr.send();
  }
}