1
   <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');
});
}); 

Чтобы сохранялся добавленный класс к zoom и у списка active

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

1
  • Пардон, не там сохранил.
    – user176262
    Commented 25 янв. 2019 в 20:48

1 ответ 1

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>

2
  • Спасибо, только у списка active не запоминает
    – steep
    Commented 25 янв. 2019 в 20:58
  • @steep уже запоминает
    – user176262
    Commented 25 янв. 2019 в 21:02

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.