页面刷新后如何保持Accordion的最后一个标签页处于展开状态？

解决方案思路 #

利用浏览器的localStorage存储最后一次激活的标签页标识，页面加载时读取该标识并自动展开对应的标签页。

修改步骤 #

1. 为每个标签页添加唯一标识：给每个.accordion_header添加data-id属性，用来区分不同标签页
2. 存储激活状态到localStorage：在点击事件中，将当前激活标签页的ID存入localStorage
3. 页面初始化时恢复状态：页面加载完成后，读取localStorage中的ID，激活对应的标签页；如果没有存储记录，默认激活第一个标签页

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Animated Accordion</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function(){
            // 点击事件：切换激活状态并存储到localStorage
            $(".accordion_header").click(function(){
                if($(this).hasClass("active")){
                    $(".accordion_header").removeClass("active");
                    localStorage.removeItem("activeAccordion");
                } else {
                    $(".accordion_header").removeClass("active");    
                    $(this).addClass("active");
                    localStorage.setItem("activeAccordion", $(this).data("id"));
                }
            });

            // 页面加载时恢复最后激活的标签页
            const activeId = localStorage.getItem("activeAccordion");
            if(activeId){
                $(`.accordion_header[data-id="${activeId}"]`).addClass("active");
            } else {
                $(".accordion_header:first").addClass("active");
            }
        });
    </script>
</head>
<body>

<div class="wrapper">
  <div class="accordion_wrap accordion_1">
    <div class="accordion_header" data-id="accordion-1">
      <a href="https://www.styl-bruk.eu/jsf/jet-woo-products-grid/tax/product_cat:55/#new">Polbruk</a>
    </div>
    <div class="accordion_body">
     [elementor-template id="12389"]
    </div>
  </div>
  <div class="accordion_wrap accordion_2">
    <div class="accordion_header" data-id="accordion-2">
      <a href="https://www.styl-bruk.eu/jsf/jet-woo-products-grid/tax/product_cat:55/#new">Bruk-Bet</a>
    </div>
    <div class="accordion_body">
     [elementor-template id="12389"]
    </div>
  </div>

</div>  
<style>
   @import url('https://fonts.googleapis.com/css?family=Muli:400,700&display=swap');

.wrapper{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Muli', sans-serif;
}

.wrapper body{

}

.wrapper{
  width: 500px;
  margin: 80px auto 0;
}


.wrapper .accordion_wrap .accordion_header{
  width: 100%;
  height: 50px;
  background: #fff;
  padding: 15px;
  color: #fff;
  font-weight: 700;
  border-bottom: 2px solid #fff;
  position: relative;
  cursor: pointer;
    background: #54595F;
}

.wrapper .accordion_wrap:first-child .accordion_header{
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.wrapper .accordion_wrap:last-child .accordion_header{
  border-bottom: 2px solid transparent;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.wrapper .accordion_wrap:last-child .accordion_header:hover{
  border-bottom: 2px solid transparent;
}

.wrapper .accordion_wrap .accordion_header:before,
.wrapper .accordion_wrap .accordion_header:after{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  width: 20px;
  height: 2px;
  background: #fff;
}

.wrapper .accordion_wrap .accordion_header:hover{
  color: #fff;
  border-color: #fff;
}

.wrapper .accordion_wrap .accordion_header:hover:before,
.wrapper .accordion_wrap .accordion_header:hover:after{
  background: #fff;
}

.wrapper .accordion_wrap .accordion_header:after{
  transform: rotate(-90deg);
  transition: all 0.5s ease;
}

.wrapper .accordion_wrap .accordion_body{
  width: 100%;
  height: 0px;
  transition: all 0.5s ease;
  background: transparent;
  overflow: hidden;
}

.wrapper .accordion_wrap .accordion_body p{
  padding: 15px;
  font-size: 15px;
  line-height: 22px;
  color: #fff;
}

.wrapper .accordion_wrap .accordion_header.active{
  color: #fff; 
  border-color: #fff;
}

.wrapper .accordion_wrap:last-child .accordion_header.active{
  border-bottom: 2px solid #01645d;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.wrapper .accordion_wrap .accordion_header.active:before,
.wrapper .accordion_wrap .accordion_header.active:after{
  background: #fff;
}

.wrapper .accordion_wrap .accordion_header.active:after{
  transform: rotate(0deg);
}

.wrapper .accordion_wrap .accordion_header.active + .accordion_body{
  height: 180px;
} 
</style>
</body>
</html>

补充说明 #

• 若希望会话结束后清除存储的激活状态，可将localStorage替换为sessionStorage
• 后续新增标签页时，只需给对应的.accordion_header添加唯一的data-id即可兼容该功能

内容的提问来源于stack exchange，提问作者Zibi19993