如何在不改变链接的情况下改变一个HTML文件到另一个文件？
如何在不改变链接的情况下改变一个HTML文件到另一个文件？
提问于 2019-03-18 02:24:21
我有一个html文件(一个网页)。我希望当我按下按钮时，页面应该被另一个html文件(带有自己的css，javascript函数等)替换，而不会被重定向到其他链接。
例如，如果第一个案例中的链接是abc.com/def，那么后面的链接也应该是相同的。
使用这段代码，我可以改变网页的外观，但不知道如何从另一个文件中改变外观(还可以加载css和js函数)。
<script type="text/javascript">
document.body.addEventListener('click',function(){
document.write("THIS IS NEW TEXT")
},
false);
</script>回答 2
Stack Overflow用户
发布于 2019-03-18 02:27:06
你需要研究像AngularJS这样的框架，特别是Angular的路由。它们为web应用程序提供了这样的内置功能。但是，您可以使用javascript以一种困难的方式来完成它，就像您现在正在做的那样。如果您不想学习任何新的框架或库，可以使用javascript添加CSS和更改整个HTML。
Stack Overflow用户
发布于 2019-03-18 02:46:02
正如其他人所讨论的，您应该使用框架来完成此任务。
但这是一个完整的解决方案，您可以从中获得灵感：
let layouts = {}
let current = null
// Display the new page by deleting current, and replacing by the good one
let displayLayout = (layout_id) => {
let parentNode = current.parentNode
parentNode.removeChild(current)
current = layouts[layout_id]
parentNode.appendChild(current)
loadEvents(current)
}
// Load event for HTML DOM you just created
let loadEvents = (layout_el) => {
Array.from(layout_el.getElementsByClassName('go-to-layout')).forEach(el => {
el.addEventListener('click', e => {
e.preventDefault()
displayLayout(e.currentTarget.dataset.layout)
})
})
}
// On init I get all the existing layout, but you can build you own dictionary an other way.
Array.from(document.getElementsByClassName('layout')).forEach(l => {
layouts[l.id] = l
if (l.classList.contains('active')) {
loadEvents(l)
current = l
}
else {
l.parentNode.removeChild(l);
}
})/* Global CSS */
body, html, .layout {
height: 100%;
margin: 0;
}
* {
color: #FFF
}
.layout {
display: flex;
}
.nav, .page {
}
.nav {
width: 150px;
background: #555;
}
/* Special CSS for one layout */
#layout1 {
background: red;
}
#layout2 {
background: blue;
}<div id="layout1" class="layout active">
<div class="nav">
<a href="#" class="go-to-layout" data-layout="layout2">Page 2</a>
</div>
<div class="page">
This is page 1
</div>
</div>
<div id="layout2" class="layout">
<div class="nav">
<a href="#" class="go-to-layout" data-layout="layout1">Page 1</a>
</div>
<div class="page">
This is page 2
</div>
<style>.page { font-size: 2em }</style>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55210420
复制相关文章
相似问题