同じID値を複数回使用して同じ場所にアンカーする

Question

私は3つの画像の四角からなる水平グリッドを持っています - 私が作成しようとしているアクションは、グリッドセクションがクリックされたときに、グリッドの下に表示されているスライドショーボックス。私が下に貼り付けたHTMLの最初のビットは1つのグリッドです（3つあります）。HTMLのセクションセクションはスライドショーセクションです。 HTMLで同じIDタグを複数回使用することはできないので、クリックするとグリッドからユーザをHTMLに変換するために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">

：第2のグリッドでこの変更

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

をしても...二回

を同じIDを使用していない、あなたは内name=""を使用していましたあなたのhtmlの第2セクション、idの代わりに：

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