Recently, I've been honing my coding skills by creating websites using HTML and CSS. I came up with an interesting concept for a horizontal scrolling menu. You know the type I'm talking about - where clicking on one item jumps to another in a cyclical pattern (e.g., clicking 'a' takes you to 'b', then 'b' to 'c', and so on). However, I've hit a roadblock when it comes to implementing the href tags. The functionality seems to work only once; after that initial jump from 'a' to 'b,' subsequent clicks fail to navigate further. Can anyone assist me with this issue? Your help is greatly appreciated.
.portfolioWrapper .portScroller {
overflow: auto;
white-space: nowrap;
height: 100%;
}
.portfolioWrapper .portScroller li.a {
width: 100%;
background-color: blue;
display: inline-block;
text-align: center;
}
.portfolioWrapper .portScroller li.b {
width: 100%;
background-color: red;
display: inline-block;
text-align: center;
}
.portfolioWrapper .portScroller li.c {
width: 100%;
background-color: green;
display: inline-block;
text-align: center;
}
li.a a.oneAnch {
text-align: right;
}
li.a a.twoAnch {
text-align: right;
}
li.a a.threeAnch {
text-align: right;
}<div class="portfolioWrapper">
<a id="portAnchor"></a>
<div class="portScroller">
<li class="a"><a href="#prj2" class="one">a</a></li>
<a id="prj1" class="oneAnch"></a>
<li class="b"><a href="#prj3" class="two">b</a></li>
<a id="prj2" class="twoAnch"></a>
<li class="c"><a href="#prj1" class="three">c</a></li>
<a id="prj3" class="threeAnch"></a>
</div>
</div>