¿Cómo puedo mostrar un div que tiene un nombre de clase particular = "show" que está en bucle en la recarga de la página? En el siguiente código al hacer clic, estoy agregando la clase 'show' a div que tiene el nombre de clase 'wrapper' a través de jquery y genera la clase como 'wrapper show' a div. Ahora quiero que este div <div class="wrapper show">.....<div> se muestre exactamente igual incluso después de recargar la página.
<div id="data"> <div class="wrapper" id="a">AAA</div> <div class="wrapper" id="b">BBB</div> <div class="wrapper" id="c">CCC</div> <div class="wrapper" id="d">DDD</div> </div> <div id="main"> <a href="#a">aaa</a> <a href="#b">bbb</a> <a href="#c">ccc</a> <a href="#d">ddd</a> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> 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 < 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(); } }; </script>El almacenamiento de la sesión desaparece después de recargar la página, se debe usar el almacenamiento local para los datos persistentes.
<script> 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 } </script>