在重新加載頁面時，最后一個活動的按鈕應該顯示，并且與按鈕相關的內容應該是可見的

我有兩個帶有 onclick 功能的按鈕。單擊 btn1 時，顯示與按鈕相關的內容，隱藏 btn2，反之亦然。Onclick 按鈕處于活動狀態。加載頁面時，如何獲取最后一個活動按鈕，其中包含與按鈕相關的 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 標簽中帶有相關內容的最后一個活動按鈕。任何人都可以幫忙。謝謝：）

uj5u.com熱心網友回復：

可以這樣使用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) {
      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");
      $(activeButtonId).addClass("active");
      $(activeButtonId).css("background-color", "grey");
      $(activeButtonId).css("outline", "none");
      $(inActiveButtonId).css("background-color", "#fff");
    }
  });
</script>

uj5u.com熱心網友回復：

i hope this codepen link help you

標籤：javascript html 查询 css 按钮

上一篇：字體大小的高度svg

下一篇：如何在嵌套的thead組件中應用colspan？