我为我的商店创建了一个Accord商店，在标题中有一个搜索产品的链接。但是，是否可以在此添加一个代码，以便在重新加载页面之前打开上次打开的页面？我的网站-https://www.styl-bruk.eu/
<!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(){
$(".accordion_header").click(function(){
if($(this).hasClass("active")){
$(".accordion_header").removeClass("active");
} else {
$(".accordion_header").removeClass("active");
$(this).addClass("active");
}
})
$(".accordion_header:first").addClass("active");
});
</script>
</head>
<body>
<div class="wrapper">
<div class="accordion_wrap accordion_1">
<div class="accordion_header">
<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">
<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>我找不到任何这样工作的代码，我也不知道。
1条答案
按热度按时间zsbz8rwp1#
您应该使用wp_options将所选选项卡保存到数据库中。
这一过程可以如下：
1-在展开折叠式选项卡时发送 AJAX 调用。
2-使用
add_option()函数存储所选选项卡。（这可以是元素的id或属性）3-当页面加载时，您将需要第二个 AJAX 调用，该调用将获取您使用
get_option()函数存储的选项。4-将活动类添加到从函数获得的选项卡中。
注意：我建议使用 AJAX ，因为我认为你是通过Elementor（不使用模板文件/后端）