I want to know how I make the labels execute every 5 seconds, all 3 have their id, how do I make them execute one by one for as long as I want using jquery or javascript?
I have already tried with SetInterval but I could not find the result, the code could not click the labels
body{
margin: 0;
}
#tags{
height: 100vh;
background-color: #ddd;
display: flex;
align-items: center;
justify-content: center;
}
#tags div{
width: 100px;
height: 100px;
margin: 20px;
border-radius: 50%;
}
#point1{
background-color: #ff0;
}
#point2{
background-color: #ff8000;
}
#point3{
background-color: #000;
}
#point1, #point2, #point3{
display: none;
}
#point1:target, #point2:target, #point3:target{
display: block;
}
#btn1, #btn2, #btn3{
margin: 10px;
}
<div id="tags">
<div id="point1"></div>
<div id="point2"></div>
<div id="point3"></div>
<a href="#point1" id="btn1">Color 1</a>
<a href="#point2" id="btn2">Color 2</a>
<a href="#point3" id="btn3">Color 3</a>
</div>
Using jQuery you could use the method
.trigger()
that fires the event you want. For example:And so that it runs from time to time using
setInterval()
as you mentioned.