在页面重新加载时保持选定的折叠面板处于活动状态,可以通过以下步骤实现:
以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>保持选定的折叠面板活动状态</title>
<style>
.panel {
border: 1px solid #ccc;
margin-bottom: 10px;
}
.panel-title {
background-color: #f5f5f5;
padding: 10px;
cursor: pointer;
}
.panel-content {
display: none;
padding: 10px;
}
</style>
</head>
<body>
<div class="panel" id="panel1">
<div class="panel-title" onclick="togglePanel('panel1')">折叠面板1</div>
<div class="panel-content">
内容1
</div>
</div>
<div class="panel" id="panel2">
<div class="panel-title" onclick="togglePanel('panel2')">折叠面板2</div>
<div class="panel-content">
内容2
</div>
</div>
<script>
// 监听页面加载事件
window.addEventListener('load', function() {
// 获取之前选定的折叠面板的状态
var activePanel = localStorage.getItem('activePanel');
if (activePanel) {
// 重新设置选定的折叠面板的活动状态
document.getElementById(activePanel).querySelector('.panel-content').style.display = 'block';
}
});
// 切换折叠面板的活动状态
function togglePanel(panelId) {
var panelContent = document.getElementById(panelId).querySelector('.panel-content');
if (panelContent.style.display === 'none') {
panelContent.style.display = 'block';
} else {
panelContent.style.display = 'none';
}
// 保存选定的折叠面板的状态
localStorage.setItem('activePanel', panelId);
}
</script>
</body>
</html>
在上述示例代码中,我们使用了HTML、CSS和JavaScript来创建了两个折叠面板。当点击折叠面板的标题时,通过JavaScript的togglePanel函数来切换折叠面板的活动状态,并使用localStorage来保存选定的折叠面板的状态。在页面加载事件中,通过JavaScript来获取之前选定的折叠面板的状态,并重新设置该折叠面板的活动状态,使其保持展开。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云