Question

我正在尝试创建索引页面，并希望具有指向隐藏div中的锚点的链接。

单击锚点链接将触发锚点所在的div变得可见，并将页面滚动到锚点位置。

我尝试了一些尝试，但是失败了。任何帮助将不胜感激。

<div>
  <p>Link</p>
  <a href="#content1">Content 1</a><a href="#content2">Content 2</a><a href="#content3">Content 3</a><a href="#content4">Content 4</a>
</div>
<div class="inter">Some intermedary content with a large bottom margin to demonstrate scroll</div>
<div>
  <div class="hiddenContent">
    <div id="content1">I am content 1</div>
    <div id="content2">I am content 2</div>
    <div id="content3">I am content 3 
    <a id="content4" >Inner anchor within content 3 div. Link should scroll here but also show the other content within content 3.</a>
    </div>
  </div>

Answer 1

这可以通过CSS轻松解决。您尚未进行任何调整，就需要进行调整以满足您的需求。

使用.hiddenContent>div, .hiddenContent > [name=content4] { display: none; } .hiddenContent>div:target { display: block; } .inter { margin-bottom: 100vh; }比索类选择器选择作为链接目标的项目

<div>
  <p>Link</p>
  <a href="#content1">Content 1</a><a href="#content2">Content 2</a><a href="#content3">Content 3</a><a href="#content4">Content 4</a>
</div>
<div class="inter">Some intermedary content with a large bottom margin to demonstrate scroll</div>
<div>
  <div class="hiddenContent">
    <div id="content1">I am content 1</div>
    <div id="content2">I am content 2</div>
    <div id="content3">I am content 3</div>
    <a name="content4" >
        <div>Some content in a named anchor</div>
    </a>
  </div>

Names <- c("name1", "name2", "name3", "name4", "name5")
batHand <- c("L", "S", "L","S", "R")
stats <- c(1, 2, 0, 1, 1)
pitchHand <- c("R", "L", "R", "R", "L")
baseballdf <- data.frame(Names, batHand, Stats, pitchHand)

使用HTML锚链接显示隐藏的div并滚动到所需的锚位置

1 个答案: