Question

我有一个由3个图像正方形组成的水平网格 - 我试图产生的动作是当点击任何网格部分时，用户将锚定到显示在网格下方的幻灯片框。我在下面粘贴的第一个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 ...

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

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

多次使用相同的ID值来锚定到同一位置

1 个答案: