页面刷新后隐藏/显示 div 重置

Question

希望一切顺利。我正在开发一个试图实现一些 JavaScript 代码的 Web 应用程序。

我的 Web 应用程序由三个部分组成：每个部分都有一个标题和一个按钮，如果单击该按钮，将显示一个之前不可见的 div 标签。再次按下同一个按钮将隐藏同一个 div。显然，每个按钮都适用于其相关部分；所以按下 Section1 按钮将仅显示/隐藏 Section1 div，其他部分/按钮依此类推。

更准确地说，为了使 mainpage.jsp 更易于使用，当我按下按钮以显示例如 Section1 div 时，其他两个 div 变得不可见：这意味着一次只能显示一个 div。

到目前为止没问题，我的功能 –

hideandshow(spoiler)

– 有效，但现在我正在尝试实现两个功能。

第一个特性非常重要：当我重新加载 mainpage.jsp 时，我的应用程序需要记住它是否正在显示一个 div，以便能够在刷新后显示相同的 div，同时保持其他 div 不可见。目前，页面在重新加载后会重置所有 div。

经过一些搜索，我了解到localStorage 或sessionStorage 是达到我目标的最佳方法，但经过几次尝试后，我仍然无法实现。作为 JavaScript 的新手，我想我遗漏了一些重要的东西，所以我希望你们能帮我找出答案。

第二个功能，不太重要，因为它就像一个美学风格功能，是让每个按钮在按下时能够更改其名称，在“显示部分（数字）”（div 不可见）和“隐藏部分（数字）”（ div 不可见）每次都被点击。不幸的是，我不知道如何实现此功能。我尝试了从 Stack Overflow 获取的几个代码，但无法正确实现它们。事实上，我的按钮并没有在每次点击时正确地更改名称，并且按钮名称的修改也影响了其他按钮，而不仅仅是三个部分的按钮。这就是为什么我什至没有尝试保留那个充满错误的代码。

我是JavaScript新手，我真的尽力了，没有想法。预先感谢您的时间、耐心和帮助。

我的代码：

   // Checking localStorage  
    if ( (JSON.stringify(localStorage.getItem('activespoiler'))  !== 'none') && (JSON.stringify(localStorage.getItem('activespoiler'))  !== null) )
    {
        document.getElementById(localStorage.getItem('activespoiler')).style.display = 'block';
    }

    // Show/hide div content defined by id (spoiler1, spoiler2, spoiler3)
    function hideandshow(spoiler)
    {
        if(document.getElementById(spoiler).style.display === 'none')
        {
            document.getElementById(spoiler).style.display = 'block';
            localStorage.setItem('activespoiler',JSON.stringify(spoiler));
            
            // Closing other spoilers
            if (spoiler === 'spoiler1')
            {
                document.getElementById('spoiler2').style.display = 'none';
                document.getElementById('spoiler3').style.display = 'none';
            }
            else if (spoiler === 'spoiler2')
            {
                document.getElementById('spoiler1').style.display = 'none';
                document.getElementById('spoiler3').style.display = 'none';
            }
            else if (spoiler === 'spoiler3')
            {
                document.getElementById('spoiler1').style.display = 'none';
                document.getElementById('spoiler2').style.display = 'none';
            }
        }
        else if (document.getElementById(spoiler).style.display === 'block')
        {
            document.getElementById(spoiler).style.display = 'none';
            localStorage.setItem('activespoiler','none');
        }        
    }

<button type="button" onclick="hideandshow('spoiler1')">Show/Hide Section 1</button>
  
    <div id="spoiler1" style="display:none">
            This is the hidden text SECTION-1! <br>
            <form action="mainpage.jsp" method="POST">
                <button type="submit">RELOAD PAGE SECTION-1</button> 
        </form>
    </div> <br><br>
<!-- Section 2 -->
<button type="button" onclick="hideandshow('spoiler2')">Show/Hide Section 2</button>
  
    <div id="spoiler2" style="display:none">
        This is the hidden text SECTION-2!
        <form action="mainpage.jsp" method="POST">
            <button type="submit">RELOAD PAGE SECTION-2</button> 
        </form>
    </div> <br><br>
<!-- Section 3 -->
<button type="button" onclick="hideandshow('spoiler3')">Show/Hide Section 3</button>
  
    <div id="spoiler3" style="display:none">
        This is the hidden text SECTION-3!
        <form action="mainpage.jsp" method="POST">
            <button type="submit">RELOAD PAGE SECTION-3</button> 
        </form>
    </div>

Answer 1

除了这一行，你的代码中的一切都很好：

localStorage.setItem('activespoiler',JSON.stringify(spoiler));

删除 JSON.stringify 并只使用 sploiler 来防止添加 "" 到您的标签 ID，如下所示：

localStorage.setItem('activespoiler',spoiler);

它会起作用的！

最好不要在你的 html 标签上使用 inline-style :

style="显示：无"

您可以使用 javascript 代码在脚本顶部的初始渲染中隐藏它们，如下所示：

document.getElementById('spoiler1').style.display = 'none'; document.getElementById('spoiler2').style.display = 'none'; document.getElementById('spoiler3').style.display = 'none';

Answer 2

第一个特点：

您可以在通过此代码加载页面时检查值：

// Checking localStorage
    window.onload = function() {
        var spoiler = localStorage.getItem('activespoiler');
        if(spoiler !== 'none'){
            document.getElementById(spoiler).style.display = 'block';
            document.getElementById(spoiler + '_button').textContent = 'Hide Section ' + spoiler.slice(-1);
        }
    }

第二个特点：

不理想，但工作变体：

将 id 添加到您的按钮，如
```
spoiler + _button
```
：
```
 id="spoiler3_button"
```

使用此代码更改脚本：

 // Checking localStorage
 window.onload = function() {
     var spoiler = localStorage.getItem('activespoiler');
     if(spoiler !== 'none'){
         document.getElementById(spoiler).style.display = 'block';
         document.getElementById(spoiler + '_button').textContent = 'Hide Section ' + spoiler.slice(-1);
     }
 }

 // Show/hide div content defined by id (spoiler1, spoiler2, spoiler3)
 function hideandshow(spoiler)
 {
     var oldSpoiler = localStorage.getItem('activespoiler');

     if(oldSpoiler !== spoiler && oldSpoiler !== null) {
         document.getElementById(spoiler).style.display = 'block';
         document.getElementById(oldSpoiler).style.display = 'none';

         document.getElementById(spoiler + '_button').textContent = 'Hide Section ' + spoiler.slice(-1);
         document.getElementById(oldSpoiler + '_button').textContent = 'Show Section ' + oldSpoiler.slice(-1);

         localStorage.setItem('activespoiler', spoiler);
     }
     else if (oldSpoiler !== null) {
         if (document.getElementById(spoiler).style.display === 'none') {
             document.getElementById(spoiler).style.display = 'block';
             document.getElementById(spoiler + '_button').textContent = 'Hide Section ' + spoiler.slice(-1);
         }
         else {
             document.getElementById(spoiler).style.display = 'none';
             document.getElementById(spoiler + '_button').textContent = 'Show Section ' + spoiler.slice(-1);
         }

         localStorage.setItem('activespoiler', spoiler);
     }
     else {
         document.getElementById(spoiler).style.display = 'block';
         document.getElementById(spoiler + '_button').textContent = 'Hide Section ' + spoiler.slice(-1);
         localStorage.setItem('activespoiler', spoiler);
     }
 }

页面刷新后隐藏/显示 div 重置

问题描述投票：0回答：2

2个回答

最新问题

页面刷新后隐藏/显示 div 重置

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2