javascript - 多次使用相同的 ID 值锚定到相同的位置

Question

我有一个由 3 个图像方 block 组成的水平网格 - 我试图产生的 Action 是当单击任何网格部分时，用户将被锚定到显示在网格下方的幻灯片框。我在下面粘贴的 HTML 的第一位是一个网格(将有 3 个)- HTML 的部分是幻灯片部分。由于我不能在 HTML 中多次使用相同的 ID 标记，我相信我需要使用一些 Javascript 或 jQuery 来将用户从单击网格时带到 .谁能帮我弄清楚该怎么做？

<div id="grid-item" class="grid-item grid-item-1">
    <div class="grid-project">
        <img class="profile-image" src="img/image1.png">
    </div>
    <div class="grid-overlay">
        <div class="project-info">
            <a href="#project-link" id="toggle">
                <h4 class="project-name">Headline 1</h4>
                <p class="project-categories">description 1</p>
            </a>
        </div>
    </div>
</div>
<div id="grid-item" class="grid-item grid-item-2">
    <div class="grid-project">
        <img class="profile-image" src="img/image.png">
    </div>
    <div class="grid-overlay">
        <div class="project-info">
            <a href="#project-link" id="toggle">
                <h4 class="project-name">Headline 2</h4>
                <p class="project-categories">description 2</p>
            </a>
        </div>
    </div>
</div>


 <div id="slideshow" class="slideshow">
        <div class="slideshow_inner">
        <a name="project-link" class="anchor">
            <img src="img/slide_img_1.png">
        </div>
    </div>

Answer 1

如果您使用 id=""你不能使用相同的 id 两次......每个元素都应该有不同的 id 名称。在第二个网格中更改它:

<a href="#project-link" id="toggle">

为此:

<a href="#project-link" id="toggle2">

并且不要使用相同的 id 两次...

此外，您还使用了 name=""在你的 html 的第二部分，而不是 id :

<a name="project-link" class="anchor">