无刷新文档页面及其完成方式

Question

我注意到某些文档网页不需要刷新即可加载内容，因此侧边栏/菜单始终存在，并且仅更新内容。

我是一名平面设计师，我正在为品牌徽标指南创建一个简单的文档页面，我不太擅长后端，我正在寻找一个框架，该框架可以加载和路由导航而不会不断刷新每个页面。我想这不是iframe。

这是纯javascript重新加载页面内容，例如$（“ #div”）.load（“ mycontent.html”）;，或者我应该考虑创建一个相似的网页吗？

Answer 1

这里是一个示例代码（原始javascript），您如何将事件监听器附加到所有在单击时导致操作的导航链接上：

/* Reload view content when changing tabs/nav-links */
var navLinks = document.getElementsByClassName("nav-link");
for (var i = 0; i < navLinks.length; i++) {
    navLinks[i].addEventListener("click", function(event){

  .... Here is the reloding stuff for the selected view 
  Simple way: insert html from predefined file contentTabX.html
 or load the dynamic generated content from the server/DB 

    }, false);
}

当然，您可以使用bootstrap4之类的框架或提供某些功能的类似框架，但代价是很多（通常是有问题的）开销。最好的方法是学习一些基本的javascript（香草），并使用可信任来源（如stackoverflow）中的代码块