Javascript 如何保持元素不刷新

主要目标是保持logotext

和菜单

不刷新，而不在页面刷新时或内容从一个页面加载到另一个页面时进行剪切。此外，菜单状态应从一个页面保留到另一个页面

我已经找到了一个可能的解决方案来解决这个问题（可以使用ajax获取更新的内容，使用jQuery将新内容放到页面上，并完全避免刷新。这样做，页面中的现有数据将保持不变。said@jfriend00）

因此，我尝试使用一个Ajax插件（名为。在AWS选项页面中，我（假设）我做了正确的事情，将

wrapper

作为Ajax容器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存储API和

Storage=jQuery.sessionStorage来保持状态正如您在文件中看到的，但这并不能解决不刷新元素的问题

菜单仅限于jsfiddle，如果这有助于了解整个画面，多亏了

你可以使用这个实时链接；上面描述的Ajax实现右（？）也有类似的情况，关于外观，菜单从一个页面到另一个页面保持不刷新；如果你浏览书籍、作品等，你会看到菜单部分；如果有一个模型可以在这里实现，我会很高兴找到它

LE：同时，我还尝试了@arvgta制作的另一个元素——特别感谢——但还没有成功，但据我从作者那里发现，定义的元素应该是带有id的div，而不是类。因此，我将尝试找到一种方法，以某种方式修改代码，以便在类上使用id

另外，我将尝试在ajaxify.min.js文件中转换和实现
页面容器
元素<代码>jQuery（“#页面容器”）.ajaxify（）
LE2：我已经尝试使用id而不是类来实现解决方案，但是页面仍然没有正确加载

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

(function($){

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

})(jQuery); 

此外，我还修改了主题文件，如果
class=page container
，则改为使用
id=page container

在这些情况下，单击菜单时，链接会发生变化（就像它应该发生的那样），菜单/logotext元素似乎工作得很好（有时会跳跳地改变位置），但在所有情况下，内容都无法正确加载；同样，在手动页面刷新（f5）中，一切都恢复正常，但没有帮助

LE3：看起来（至少）革命滑块插件和Ajaxify之间存在冲突

errormessage=“Revolution Slider Error:在Revolution文件js include之后有一些jquery.js库include。”=“+=”
这包括使旋转滑块库失效，并使其无法工作。”“”

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

LE4：据我所知，有很多用户投票支持Jake Bown的答案，这确实是一个解决方案；但是我找不到没有正确地在我的主题中实现的原因（没有错误），元素logotext/menu在刷新时仍然褪色，没有保持不刷新。杰克·鲍恩/有人有什么想法吗

决赛。
Buzinas考虑到我的网站环境（已安装插件等），为我的需求提供了最接近的答案。
根据您所说的，我想我可能已经找到了您想要的解决方案-您希望动态加载内容，同时保持徽标和导航不变？如果是的话

在本例中，页面是从页面内的div加载的，但可用于加载另一个URL或文件：

$('.viewport ul li a').on('click', function(e) {
   e.preventDefault();
   var link = this.hash.substring(1, this.hash.length);
   if($('.'+link).length) {
     $('.viewport span.body').html($('.'+link).html());
   }
});

TL；DR

我有，看一看，然后。你会从中学到很多


我认为你在这里尝试了太多东西，但没有尝试最简单的：

主要目标是保持logotext和菜单不刷新，而不在页面刷新时或内容从一个页面加载到另一个页面时进行剪切。此外，菜单状态应从一个页面保留到另一个页面

如果要执行此操作，请执行以下几个步骤：


创建一个“母版”页面，从现在起我们将称之为
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直接打开我们的一个页面，他将看到未设置样式的页面，没有菜单/徽标等。那么，我们该怎么办

我们现在还有几个步骤：


使用历史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;
  }
});


而我们
/* 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('/');

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();

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();
  }
}

<?php 
//get_header()
if(!isset($_REQUEST['ajax'])){
  get_header();
}
?>

<!-- other code --->

<?php
//get_footer()
if(!isset($_REQUEST['ajax'])){
  get_footer();
}
?>

    <script>
!(function($) {
    $(function() {
        $('.menu-item a, .widget-area a, .page_item a').on('click', function(e) {
            e.preventDefault();
            var href = this.href;
            var query = href ? (href + (!/\?/g.test(href) ? '?' : '&') + 'ajax=1') : window.location;

            /* IMPLEMENT SOME LOGIG HERE BEFORE PAGE LOAD */
            /* ex: kill instance of running plugins */

            $('#content').hide().empty().load(query, function() {

                /* IMPLEMENT SOME LOGIG HERE AFTER PAGE IS LOADED */
                /* ex: refresh or run a new plugin instance for this page */

                jQuery(this).show();
            });
        });
    });
})(jQuery);
    </script>

<div id="content"></div>