javascript - show/hide div using javascript
问题描述
I have two divs, one is hidden and the other one is visible. I'm using css display:none;
to hide first and using style.display="block";
when I refresh the page it gives same div name in the address bar but the div is hidden.
I just want the div to stay block after refreshing or submitting the form inside the div
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<style>
#content {
flex:8;
display:flex;
flex-direction:row;
justify-content:space-between;
flex-basis:100%;
padding:0 10px 0x 10px;
text-align:center;
}
#leftnav {
flex:1;
padding-top:20px;
}
#midcontent {
flex:9;
text-align:center;
padding-top:20px;
display:block;
}
#leftnav ul {
display: block;
margin: 0px;
padding: 0px;
list-style-type: none;
}
#m1,#m2,#m3 {
flex:9;
text-align:center;
padding-top:20px;
display:none;
}
</style>
</head>
<body>
<div id="content">
<div id="leftnav" align="center">
<ul>
<li><a href="#m1" onClick="div1()">Page m1</a></li>
<li><a href="#m2" onClick="div2()">Page m2</a></li>
<li><a href="#m3" onClick="div3()">Page m3</a></li>
</ul>
</div>
<div id="midcontent" align="center">
<p>Home Page</p>
</div>
<div id="m1" align="center">
<p>Div m1</p>
</div>
<div id="m2" align="center">
<p>Div m2</p>
</div>
<div id="m3" align="center">
<p>Div m3</p>
</div>
</div>
<script type="text/javascript">
var d=document.getElementById('midcontent');
var d1=document.getElementById('m1');
var d2=document.getElementById('m2');
var d3=document.getElementById('m3');
function div1() {
if(d.style.display === "block") {
d.style.display = "none";
d1.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "block";
d2.style.display = "none";
d3.style.display = "none";
}
}
function div2() {
if(d.style.display === "block") {
d.style.display = "none";
d2.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "none";
d2.style.display = "block";
d3.style.display = "none";
}
}
function div3() {
if(d.style.display === "block") {
d.style.display = "none";
d3.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "none";
d2.style.display = "none";
d3.style.display = "block";
}
}
</script>
</body>
</html>
解决方案
改变:
function div1() {
var d=document.getElementById('midcontent');
var d1=document.getElementById('m1');
if(d.style.display === "block") {
d.style.display = "none";
d1.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "block";
}
}
至:
function toggleDiv() {
document.getElementById('midcontent').style.display = "none";
document.getElementById('m1').style.display = "block";
}
“我只想让 div 在刷新后保持阻塞”在 html 中调用页面加载函数以使其在页面刷新后执行:
<body onLoad="toggleDiv()">
<!-- Your html content -->
</body>
或者,您也可以在 js 中执行此操作:
document.addEventListener("DOMContentLoaded", function(event) {
// Your code to run since DOM is loaded and ready
toggleDiv()
});
如果您想要更深入的持久性和/或变量更改,请提供有关如何以及为什么要准确执行此操作的更多信息!希望能帮助到你!:)
推荐阅读
- javascript - 如何在 Javascript 中从 Firestore 访问子集合?
- rust - 使用 Rust 创建一个静态库以将其链接到 arm-none-eabi C 代码固件
- facebook-graph-api - 如何检索 fb 图形应用程序的所有用户的用户 ID?
- django - 显示错误:找不到“主页”的反向。'hompage' 不是有效的视图函数或模式名称
- regex - 正则表达式在文件名中查找不可读的字符
- makefile - 即使“-lrt”包含编译,对“timer_create”的未定义引用
- sql - SQL(Postgres)为列表参数中的每个项目获取一行,其优先顺序由另一列指定
- big-o - 这种对 TSP 的贪婪搜索的大 O 时间复杂度是多少?
- php - 在 WooCommerce 中为特定订单状态启用“取消”订单操作按钮
- pyspark - 并行计算和推理许多火花核密度估计器