Question

这是我在（li）s中以两种方式编写的代码，但它们都没有工作：

<ul class="submenuItems">
          <li><a href="index.html#ourpurpose">Our Purpose</a></li>
          <li><a href="#scope">Scope</a></li>

对于目标，这是代码：

<h1 id="ourpurpose">Our Purpose<h1>
...
<h1 id="scope">Scope</h1>

我想链接它，知道它们在视差页面中处于相同的<section>，但是由图像和div分隔。

Answer 1

使用#scope和#ourpurpose是正确的，在这种情况下，您需要添加section（您也可以使用div）

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}

section {
    width: 100%;
    height: 100%;
    background: red;
}

.topics {
    background: blue;
    color: white;
}

<ul class="submenuItems">
  <li><a href="#ourpurpose">Our Purpose</a></li>
  <li><a href="#scope">Scope</a></li>
</ul>

<section id="ourpurpose-section">
<h2>ourpurpose</h2>
<div class="topics" id="ourpurpose"> I am topics</div>
<p>Some Text</p>
<div class="images"><!-- Some images --></div>
</section>
<section id="scope-section">
<h2>scope</h2>
<div class="topics" id="scope">topics</div>
<p>Some Text</p>
<div class="images"><!-- Some images --></div>
</section>
<section></section>

Answer 2

你需要使用ID＆＃34;我们的目的＆＃34;在链接的href字段中。如果内容在同一页面上。

<a href="#ourpurpose">Our Purpose</a>

如何链接到不同部分的锚标签

2 个答案: