gpt4 book ai didi

javascript - 保存切换的类 Div(使用本地存储)

转载 作者:行者123 更新时间:2023-11-28 04:11:07 25 4
gpt4 key购买 nike

所以我有一个带有 div 的基本 classtoggle 示例,但是我可以制作它,以便“事件 class”可以通过刷新/重新打开保持切换状态。这可以做到吗?

function myfunc(div) {
var className = div.getAttribute("class");
if(className=="normal") {
div.className = "active";
}
else{
div.className = "normal";
}
}
.normal /*Default*/
{width:25%; height:25%; background: #ffeb00;}

.active /*Switch*/
{width:25%; height:25%; background: #ff00e2;}
<html>
<head>
<title>Test</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div id="div" class="normal" onclick="myfunc(this)"></div>
<script src=".jquery-3.2.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>

感谢您 future 的所有回答。

最佳答案

Use the localStorage to hold the last class

try jsfiddle

 $("#div").addClass(localStorage.getItem('ClassName')) ;

$("#div").on("click",function(){
if($(this).hasClass('active')){
$(this).removeClass("active").addClass("normal");
localStorage.setItem('ClassName', 'normal');
}
else{
$(this).removeClass("normal").addClass("active");
localStorage.setItem('ClassName', 'active');
}
});

关于javascript - 保存切换的类 Div(使用本地存储),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46261614/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com