<ul class="tabs"> <li class="tab col s3"><a class="btn-25 active" href="#">25%</a></li> <li class="tab col s3"><a class="btn-33" href="#">33%</a></li> <li class="tab col s3"><a class="btn-50" href="#">50%</a></li> <li class="tab col s3"><a class="btn-100" href="#">100%</a></li> </ul> <div class="zoom"><img src="https://i.ibb.co/KLtXjgW/md-5a926256440ed.jpg"></div> <div class="zoom"><img src="https://i.ibb.co/KLtXjgW/md-5a926256440ed.jpg"></div> <div class="zoom"><img src="https://i.ibb.co/KLtXjgW/md-5a926256440ed.jpg"></div> <div class="zoom"><img src="https://i.ibb.co/KLtXjgW/md-5a926256440ed.jpg"></div> $(function() { $('.btn-25').click(function() { $('.zoom').addClass('zoom-25').removeClass('zoom-33 zoom-50 zoom-100'); }); $('.btn-33').click(function() { $('.zoom').addClass('zoom-33').removeClass('zoom-25 zoom-50 zoom-100'); }); $('.btn-50').click(function() { $('.zoom').addClass('zoom-50').removeClass('zoom-25 zoom-33 zoom-100'); }); $('.btn-100').click(function() { $('.zoom').addClass('zoom-100').removeClass('zoom-25 zoom-33 zoom-50'); }); });

To save the added class to the zoom and the list active

https://codepen.io/stopani/pen/JxGMWy

  • Sorry, not there saved. - Igor

1 answer 1

 $(function() { function updateZoom(zoom) { $('.btn-zoom.active').removeClass('active'); var zooms = []; $('.btn-zoom').each(function() { zooms.push("zoom-" + $(this).data("zoom")); if ($(this).data("zoom") == zoom) $(this).addClass('active'); }); $('.zoom').removeClass(zooms.join(" ")); $('.zoom').addClass('zoom-' + zoom); localStorage.setItem("zoom", zoom); } $('.btn-zoom').click(function() { var zoom = $(this).data("zoom"); updateZoom(zoom); }); if (localStorage.getItem("zoom")) updateZoom(localStorage.getItem("zoom")); }); 
 img { width: 100%; } .zoom { float: left; width: 23%; margin: 2% 1% 0%; } .zoom-25 { width: 23%; } .zoom-33 { width: 31.3%; } .zoom-50 { width: 48%; } .zoom-100 { width: 98%; } .btn-zoom.active { color:red; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="tabs"> <li class="tab col s3"><a class="btn-zoom active" data-zoom="25" href="#">25%</a></li> <li class="tab col s3"><a class="btn-zoom" data-zoom="33" href="#">33%</a></li> <li class="tab col s3"><a class="btn-zoom" data-zoom="50" href="#">50%</a></li> <li class="tab col s3"><a class="btn-zoom" data-zoom="100" href="#">100%</a></li> </ul> <div class="zoom"><img src="https://i.ibb.co/KLtXjgW/md-5a926256440ed.jpg"></div> <div class="zoom"><img src="https://i.ibb.co/KLtXjgW/md-5a926256440ed.jpg"></div> <div class="zoom"><img src="https://i.ibb.co/KLtXjgW/md-5a926256440ed.jpg"></div> <div class="zoom"><img src="https://i.ibb.co/KLtXjgW/md-5a926256440ed.jpg"></div>

  • Thank you, only the active list does not remember - steep
  • @steep already remembers - Igor