如何在html中的同一页面上创建指向各部分的链接（但不同的选项卡）

Question

正如问题所述，我想在我的页面中制作超文本，其中包含4个选项卡（编织为HTML）。 我知道这种方法在没有不同选项卡的同一页面中很好地工作，但它与我不合适。

使用#id选择器 ＆lt; p id =“打开”＆gt;超链接使用Web浏览器从一个页面移动到另一页...＆lt;/p＆gt;

创建指向选择器的链接 ＆lt; a href =“＃打开”＆gt;带我去开头段落。＆lt;/a＆gt;

您能帮我吗？

例如，在“家庭”选项卡中，我想要一个超文本，将用户引导到“关于我们”选项卡中的特定部分，

谢谢

，我正在使用html和r markdown使用html来编织文件。

Answer 1

这是您可以做的。您可以为容器分配一个宽度和高度，然后溢出：自动。每个儿童必须具有与container相同的高度和相同的宽度，因此，如果您有几个孩子，这将溢出。

超链接或选项卡在单击时会做什么，它滚动以查看上述儿童。

.container {
  width: 200px;
  height: 200px;
  overflow: auto;
}

.child {
  display: block;
  background: aliceblue;
  height: 200px;
}

<div class="container">
<div class="tabs">
<a href="#Tab-1">Tab-1</a>
<a href="#Tab-2">Tab-2</a>
<a href="#Tab-3">Tab-3</a>
</div>
<div id="Tab-1" class="child">
Tab 1
</div>
<div id="Tab-2" class="child">
Tab 2
</div>
<div id="Tab-3" class="child">
Tab 3
</div>
</div>