我开始使用引导程序开发一个应用程序，对如何在右侧拥有静态左侧导航栏和动态内容区域进行了一些研究，但无法获得线索。有人可以建议每次单击链接时如何仅更改内容区域（单独的 html 页面）并具有静态导航栏和标题。类似于 HTML 中可用的框架集标记。
基本上我不希望在应用程序的所有 html 页面中添加导航条码。
谢谢
【问题讨论】：
标签： javascript twitter-bootstrap navigationbar
我认为框架很久以前就死了。
要实现“导航”，您需要某种模板和路由。看看 Angular 或 React。几乎所有服务器端语言都有带有模板的 Web 框架。
如何实现与框架类似的行为的相关讨论：What are the new frames?
【讨论】：
2018 年了，没有人再使用框架标签了，我更喜欢 this solution，希望对你有所帮助
另见 W3schools How TO - Include HTML
content.html
<a href="howto_google_maps.asp">Google Maps</a><br>
<a href="howto_css_animate_buttons.asp">Animated Buttons</a><br>
<a href="howto_css_modals.asp">Modal Boxes</a><br>
<a href="howto_js_animate.asp">Animations</a><br>
<a href="howto_js_progressbar.asp">Progress Bars</a><br>
<a href="howto_css_dropdown.asp">Hover Dropdowns</a><br>
<a href="howto_js_dropdown.asp">Click Dropdowns</a><br>
<a href="howto_css_table_responsive.asp">Responsive Tables</a><br>
包含 HTML
<div w3-include-html="content.html"></div>
添加 JavaScript
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
}
</script>
【讨论】：