如何在页面重新加载的循环中显示具有特定类名的 div

Question

如何显示具有特定 classname="show" 的 div，它在页面重新加载时处于循环状态。在下面的onclick代码中，我通过jquery将类'show'添加到具有类名'wrapper'的div，并将类生成为'wrapper show'到div。现在我想要这个 div <div class="wrapper show">.....<div> 将在页面重新加载后显示完全相同。

<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>

Answer 1

页面重新加载后会话存储消失，应该使用localstorage来持久化数据。

 <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>