Clever Geek Handbook

Link to div within div within one HTML

I am currently using Bootstrap's timeline ( here ). Since this will be a long timeline, I want some characters (each with a date and a unique ID) at the top to represent a specific event. When I click on a specific symbol, I want to redirect to the corresponding event in the timeline.

However, at the moment, when I click on a symbol, I am redirected to the top of the container div that contains the timeline, not to the specific one <li>

Example: LINK:

<ol class="timeline">
   <li class="timeline__step done">
        <a href="#type1" id="type1"></a>
    </li>

</ol>

TO:

<div class="container">
     <ul class="timeline2">
        <li id = "type1" onclick = "window.location.hash = 'type1';">
        </li>
     <ul>
<div>`
+3


source to share


2 answers


Remove id

from link and remove onclick

from timeline item. The hashtag in href

should go to the id

set in the timeline element.



<ol class="timeline">
   <li class="timeline__step done">
        <a href="#type1"></a>
    </li>
</ol>

<div class="container">
     <ul class="timeline2">
        <li id="type1">
        </li>
     <ul>
<div>
+4


source


Since you have the same type 1 id for two DOM elements. The identifier must be unique.



+2


source






More articles:


All Articles