在重新加载页面时，最后激活的按钮应该显示，并且与按钮相关的内容应该是可见的

Question

我有两个带有点击功能的按钮。单击 btn1 时，将显示与按钮相关的内容，而 btn2 将隐藏，反之亦然。单击该按钮处于活动状态。加载页面后，如何获取最后一个活动按钮以及与该按钮相关的 div 标签中的内容？

这里是HTML和CSS

<style>

    .toggle-btn{
        background-color: lightblue;
        display: flex;
        justify-content:center;
        }

    .btn-1{
        width:30px;
        height:20px;
        border-top-left-radius:25px;  
        border-top-right-radius:;  
        border-bottom-right-radius:;  
        border-bottom-left-radius:25px;
          
    }
    .btn-2{
        width:30px;
        height:20px;
        border-top-left-radius:;  
        border-top-right-radius:25px;  
        border-bottom-right-radius:25px;  
        border-bottom-left-radius:;
    }
    .btn{
        width:55px;
        height: 38px;
        background: #fff;
        margin-right:1px;
        box-shadow: 5px 2px 10px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease 0s;
        cursor: pointer;
        outline: none;
        border: none;
        
        
    }
    .btn: focus {
         background: #f7f7f7;
            outline: none;
            -webkit-box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.1);
                box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.1);
    }
    .container-1{display:flex;justify-content:center;
    }
    .container-2{display:none;justify-content:center;
    }
</style>


<div class="toggle-btn">
    
                <button type="button" class="btn btn-1 active" id="button1" onclick="before();">
                    btn1
                </button>
                <button type="button" class="btn btn-2" id="button2" onclick="after();">
                    btn2
                </button>
    </div>
    
    <div class="container-1" id="container-1">
                <span  >1000000</span> 
    </div>
    
    <div class="container-2" id="container-2">
                <span >2000000000</span> 
    </div>

这是按钮功能的脚本：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!--button function onclick-->
<script>
         function before(){
             document.getElementById('container-2').style.display = "none";
         document.getElementById('container-1').style.display = "flex";
         }
          
         function after(){
             document.getElementById('container-2').style.display = "flex";
         document.getElementById('container-1').style.display = "none";
            
         }
    $(document).ready(function() {
            $('#button1').click(function() {
                $('#button2.active').removeClass("active");
                $('#button1').addClass("active");
                $('#button1').css("background-color", "grey");
                $('#button1').css("outline", "none");
                $('#button2').css("background-color", "#fff");
                localStorage.setItem("Activebtn","button1");
            });

            $('#button2').click(function() {
                $('#button1.active').removeClass("active");
                $('#button2').addClass("active");
                $('#button2').css("background-color", "grey");
                $('#button2').css("outline", "none");
                $('#button1').css("background-color", "#fff");
                localStorage.setItem("Activebtn","button2");
            });
            
        });

</script>

我想在页面重新加载时获取并显示页面上 div 标记中的相关内容的最后一个活动按钮。谁能帮忙。谢谢:)

Answer 1

这可以使用 Window.localStorage 来实现。

这个编辑过的脚本现在在按钮点击事件中保存活动和非活动按钮以及活动容器的状态。

它会在每次（再次）加载文档时相应地设置这些状态。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!--button function onclick-->
<script>
  function before(){
    document.getElementById('container-2').style.display = "none";
    document.getElementById('container-1').style.display = "flex";
  }
          
  function after(){
    document.getElementById('container-2').style.display = "flex";
    document.getElementById('container-1').style.display = "none";
  }
  
  $(document).ready(function() {
    $('#button1').click(function() {
      $('#button2.active').removeClass("active");
      $('#button1').addClass("active");
      $('#button1').css("background-color", "grey");
      $('#button1').css("outline", "none");
      $('#button2').css("background-color", "#fff");
      localStorage.setItem("activeBtnId","#button1");
      localStorage.setItem("inactiveBtnId","#button2");
      localStorage.setItem("activeContainerId","container-1");
    });

    $('#button2').click(function() {
      $('#button1.active').removeClass("active");
      $('#button2').addClass("active");
      $('#button2').css("background-color", "grey");
      $('#button2').css("outline", "none");
      $('#button1').css("background-color", "#fff");
      localStorage.setItem("activeBtnId","#button2");
      localStorage.setItem("inactiveBtnId","#button1");
      localStorage.setItem("activeContainerId","container-2");
    });

    if (localStorage.getItem("activeBtnId") !== null && localStorage.getItem("inactiveBtnId") !== null && localStorage.getItem("activeBtnId") !== null) {
      let activeButtonId = localStorage.getItem("activeBtnId"),
      inactiveButtonId = localStorage.getItem("inactiveBtnId"),
      activeContainerId = localStorage.getItem("activeContainerId");   
              
      if (activeContainerId == 'container-1') {
        before();
      } else if (activeContainerId == 'container-2') {
        after();
      }
         
      $(inactiveButtonId).removeClass("active").css("background-color", "#fff");
      $(activeButtonId).addClass("active").css({"background-color": "grey", "outline": "none"});
    }
  });
</script>

在重新加载页面时，最后激活的按钮应该显示，并且与按钮相关的内容应该是可见的

on reloading the page the button which is last active should show and also the content that is related to the button should be visible

html

javascript

css

jquery

button