时间戳

首页 > 解决方案 > 重新加载后制作相同的活动按钮

javascript - 重新加载后制作相同的活动按钮

问题描述

现在，我有两个按钮，每个按钮都有不同的视图。

 <div style="margin-top:-25px;margin-left:105px;">
      <p style="color:black;"><b>View In : </b></p>
      <div class="btnContainer" id="btnContainer">
         <button class="lists active" onclick="gridView()"> Grid</button>
         <button class="lists" onclick="listView()" style="margin-left:-4px;"> List</button> 
      </div>
 </div>

  <div class="row" id="pading1">

      <!------------- Card Position 1 ----------------->
  </div>

  <div class="row" id="pading2">

      <!------------- Card Position 2 ----------------->
  </div>

这是设置按钮样式的 CSS 脚本

  /* Style the buttons grid */
.lists {
    border: none;
    outline: none;
    padding: 5px 10px;
    background-color: #ffffff;
    cursor: pointer;
    width: 100px;
}
.lists:hover{
    background-color: #ddd;
}
.lists.active {
    background-color: #01b1ea;
    color: white;
}
.btnContainer{
    background-color:transparent;
    width:200px;
    margin-top:-35px;
    margin-left:70px;
}

这是用于切换每个页面的视图的 js 脚本

    <!------------------- Switch Padding Button Grid Maps ------------------->
    <script>
      function listView(){
        $("#pading1").hide();
        $("#pading2").show();
        $(".search-container").hide();
      }

      function gridView(){
        $("#pading1").show();
        $("#pading2").hide();
      }

      var container = document.getElementById("btnContainer");
      var btns = container.getElementsByClassName("lists");
      for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function() {
           var current = document.getElementsByClassName("active");
           current[0].className = current[0].className.replace(" active", "");
           this.className += " active";
        });
      }
    </script>

现在，每次我重新加载页面时它仍然会在grid我设置grid视图时查看是默认设置。

我想问，当我在list视图中并刷新网页时，如何使button active仍然在list视图中？

谢谢

标签： javascriptjquery

解决方案

您可以通过设置 sessionStorage / localStorage 或 cookie 来做到这一点。这是一个使用 sessionStorage 的工作示例：

      // Check what type of view we have setup
  if(sessionStorage.view == 'list') {
    listView();
  }
  else {
    gridView();
  }
  
 function listView(){
    $("#pading1").hide();
    $("#pading2").show();
    $(".search-container").hide();
    sessionStorage.view = "list";
  }

  function gridView(){
    $("#pading1").show();
    $("#pading2").hide();
    sessionStorage.view = "grid";
  }

  var container = document.getElementById("btnContainer");
  var btns = container.getElementsByClassName("lists");
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
       var current = document.getElementsByClassName("active");
       current[0].className = current[0].className.replace(" active", "");
       this.className += " active";
    });
  }

推荐阅读