css 如何用另一个html文件的内容替换div的内容

xyhw6mcr 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(122)

我有一个页面，有三个Divs：container，side-nav，content.我想在单击侧导航中的链接时，将***body***div中的HTML替换为另一个（源）HTML文件中的HTML。
index.html

<div class="float-container">
   <div class="sidenav">
     <a href="#about">About</a>
     <a href="#services">Services</a>
     <a href="#clients">Clients</a>
   </div>

   <div class="body">
      <p>some text here.</p>
   </div>

</div>

about.html

<h1>About Me</h1>
<p> yada yada yada</p>

css

来源：https://stackoverflow.com/questions/76096503/how-to-replace-the-contents-of-a-div-with-content-from-another-html-file

2条答案

按热度按时间

sbdsn5lh1#

要实现这一点，请使用<iframe>。HTML文件可以通过src属性直接加载到iframe中。

const ibody = document.querySelector('iframe.body')
document.querySelectorAll('.sidenav>a').forEach(a => {
  a.addEventListener('click', evt => {
    ibody.src = a.innerHTML.toLowerCase() + '.html'
    console.log('loaded ' + ibody.src + ' into iframe')
  })
})

.float-container {
  display: grid;
  grid-template-columns: 100px auto;
}

.sidenav {
  border: 1px solid red;
}

.sidenav a {
  display: block;
  cursor: pointer;
}

.body {
  width: 100%;
  height: 400px;
  border: 1px solid blue;
}

<div class="float-container">
   <div class="sidenav">
     <a>About</a>
     <a>Services</a>
     <a>Clients</a>
   </div>

   <iframe class="body" frameborder="0"></iframe>
</div>

赞(0）回复(0）举报 2023-05-02

jutyujz02#

简单地说，我通常使用**frameset**。