多次使用相同的ID值錨定到相同的位置

我有一個由3個圖像正方形組成的水平網格 - 我試圖產生的動作是當任何網格部分被點擊時，用戶將被錨定到顯示在網格下方的幻燈片放映框。我在下面粘貼的HTML的第一位是一個網格（將會有3個） - HTML的section部分是幻燈片部分。由於我無法在HTML中多次使用相同的ID標記，我相信我需要使用Javascript或jQuery的某些功能才能將用戶從網格上點擊到HTML中。任何人都可以幫我弄清楚如何做到這一點？多次使用相同的ID值錨定到相同的位置

<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>

來源

2017-04-12 Colin Roemer

所以你粘貼的代碼有效嗎？你沒有包含代碼的麻煩？ –

@MichaelCoker我剛更新了html。因此，第一次使用錨點標籤＃project-link可以在grid-item-1中工作，但它不會在網格下方鏈接（grid-item-2） –

似乎鏈接到我... http：// codepen。 io/anon/pen/jmOLob –

如果您使用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">

來源

2017-04-12 19:19:56 Varin

我很抱歉，我應該刪除切換的ID，因爲這不是當前正在使用，並沒有任何相關的行動。因此，因爲我不能使用相同的ID來錨定到使用HTML的特定部分，我假設我需要實現一些JavaScript的使用，然後才能獲得單擊的元素的值，然後導航到X部分 –

如果您想要使用不同地方的不同鏈接鏈接到一個ID - 那麼這不是問題。只需創建一個元素，如下所示： '

' 然後您可以使用很多鏈接鏈接到此ID。例如： 'Click Here' - 您可以多次使用它。你不能給同一個ID多個元素，但在你的情況下無關緊要。 – Varin

這雖然工作... https://jsfiddle.net/uwrnbLko/ – Varin

多次使用相同的ID值錨定到相同的位置

回答

相關問題