There is a simple menu with 3 items (more will be possible later), you need to go forward ahead when you press the go button, and go back one step when you press the "bg" button.

Example: If the user clicked on the item "meny_1" and then on "meny_2" and on "meny_3", then he made all these three points active in turn. But when he pressed the "bg" button, he returned to the previous menus. And when you press the "go" button, the user goes one step further.

Is it possible to implement this on jquery?

Here is an example of my code with transitions:

$(".nav").click(function() { $(".nav").removeClass("active"); $(this).addClass("active"); }); 
 ul > li { float: left; margin-left: 10px; list-style: none; } ul > li > a { text-decoration: none; } .active { color: red; } 
 <ul> <li><a href="#">go</a> </li> <li><a class="nav" href="#">meny_1</a> </li> <li><a class="nav" href="#">meny_2</a> </li> <li><a class="nav" href="#">meny_3</a> </li> <li><a href="#">bk</a> </li> </ul>

  • 2
    @lexxl arrays for wimps?))) Well, you suggested some kind of hell really ... Just when you click, write to the history array, which may lie in localStorage for example. - Vasily Barbashev

1 answer 1

 $(".nav").click(function() { $(".nav").removeClass("active"); $(this).addClass("active"); }); 
 ul > li { float: left; margin-left: 10px; list-style: none; } ul > li > a { text-decoration: none; } .active { color: red; } 
 <ul> <li><a href="javascript: void(0);" onclick="window.history.forward()">go</a> </li> <li><a class="nav" href="#">meny_1</a> </li> <li><a class="nav" href="#">meny_2</a> </li> <li><a class="nav" href="#">meny_3</a> </li> <li><a href="javascript: void(0);" onclick="window.history.back()">bk</a> </li> </ul>