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

Question

我注意到一些文档网页不需要刷新来加载内容，因此 sidebar/menu 始终存在并且仅更新内容。

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

这是纯粹的 javascript 重新加载页面内容吗？ $( "#div" ).load( "mycontent.html" );，或者我应该研究什么来创建类似的网页？

Answer 1

这是一个示例代码（vanilla 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 files like contentTabX.html (x = 1.. n)
 or load the dynamic generated content from the server/DB 

    }, false);
}

您当然可以使用像 bootstrap4 或类似的框架来提供一些功能，但代价是很多（通常是有问题的）开销。
最好的办法是学习一些基本的 javascript (vanilla) 并使用来自 Whosebug

等可信来源的代码块

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

A no refresh documentation page and how it is done

javascript

routing

uikit

getuikit