Блог

Как я могу показать div с определенным именем класса=»показать», которые находятся в цикле при перезагрузке страницы. В приведенном ниже коде с помощью onclick я добавляю класс «показать» в div, у которого есть имя класса «оболочка» через jquery, и он генерирует класс как «показать оболочку» в div. Теперь я хочу, чтобы этот div lt;div class="wrapper show"gt;.....lt;divgt; отображался точно так же даже после перезагрузки страницы.

 lt;div id="data"gt;  lt;div class="wrapper" id="a"gt;AAAlt;/divgt;  lt;div class="wrapper" id="b"gt;BBBlt;/divgt;  lt;div class="wrapper" id="c"gt;CCClt;/divgt;  lt;div class="wrapper" id="d"gt;DDDlt;/divgt; lt;/divgt;  lt;div id="main"gt;  lt;a href="#a"gt;aaalt;/agt;  lt;a href="#b"gt;bbblt;/agt;  lt;a href="#c"gt;ccclt;/agt;  lt;a href="#d"gt;dddlt;/agt; lt;/divgt;  lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt;  lt;scriptgt;   jQuery(document).ready(function ($) {  $('.wrapper').hide();  $('a[href^="#"]').on('click', function (event) {  $('.wrapper').hide();  $('.wrapper').removeClass("show");  var target = $(this).attr('href');  $('.wrapper'   target).addClass("show");  $('.wrapper'   target).toggle();   });  });   function trigger() {  var data = sessionStorage.getItem('clicked');  if (data == 'true') {  var element = document.querySelectorAll("#load-data div");  for (var j = 0; j lt; element.length; j  ) {  if (element[j].className == "wrapper show") {  // this.className = ""wrapper show";  this.style.display = "block";  sessionStorage.setItem('clicked', true);  }  }  }  }   window.onload = function () {  var data = sessionStorage.getItem('clicked');  if (data == 'true') {  trigger();  }  }; lt;/scriptgt;  

Хранилище сеансов исчезает после перезагрузки страницы, для сохранения данных следует использовать локальное хранилище.

 lt;scriptgt;  jQuery(document).ready(function ($) {  $('.wrapper').hide();  $('a[href^="#"]').on('click', function (event) {  $('.wrapper').hide();  $('.wrapper').removeClass("show");  var target = $(this).attr('href');  $('.wrapper'   target).addClass("show");  $('.wrapper'   target).toggle();  localStorage.setItem('item-clicked', target);  });  // must be moved from window.onload because it has to wait for jQuery to be ready  var data = window.localStorage.getItem('item-clicked');  if (data != null) {  trigger();  }  });    function trigger() {  var data = window.localStorage.getItem('item-clicked');  console.log($(data))  $(data).addClass("show"); // adds the show class  $(data).toggle(); // toggles the class  }  lt;/scriptgt;