如何在单击窗口特定部分的菜单栏按钮后打开Html页面？

Question

单击菜单后，特定的html页面应该在窗口的一部分打开，如何使用div标签执行此操作？你能告诉我一些例子吗？现在我在Frame标签的帮助下这样做，但还有另一种替代方法，提前谢谢。

Answer 1

您必须包含对要使用id定位的div的引用，例如：

<a href="https://getbootstrap.com/docs/4.1/components/card/#list-groups">Link</a>

你可以在那里看到，最后一部分是#list-group，这是对引导组件页面中id的list-groups部分的引用;你必须这样做;指定要转到的部分的ID;当页面打开时，它将转到该部分。

所以类似于：

<a href="another_page/#your_section_id">Link</a>

将打开页面并定位该页面上具有以下内容的部分：

<div id="your_section_id"></div>

Answer 2

如果我理解正确你想通过点击按钮在你的页面上打开一个带有html的弹出窗口，你就可以这样做

function openHtml()
{
   document.getElementById("html_block").innerHTML = "YourHTML..."; //simple way
   //$("#target_div").load("YOUR_PAGE.html"); //you can also use this to load html from file using jquery
}

.main_page
{
 width: 100%;
 height: 200px;
 background: grey;
 position: relative;
}
#html_block
{
  position: absolute;
  background: red;
  left: 80%; /*your specific position*/
  bottom: 10px;
}

<div class="main_page">
  <button onclick="openHtml()">open html</button>
  <div id="html_block"></div>
</div>