使用javascript显示/隐藏div

Question

I have two divs, one is hidden and the other one is visible.我有两个 div，一个是隐藏的，另一个是可见的。 I'm using css display:none;我正在使用 css display:none; to hide first and using style.display="block";首先隐藏并使用style.display="block"; when I refresh the page it gives same div name in the address bar but the div is hidden.当我刷新页面时，它在地址栏中给出了相同的 div 名称，但该 div 被隐藏了。 I just want the div to stay block after refreshing or submitting the form inside the div我只希望 div 在刷新或提交 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>

Answer 1

change:改变：

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";
    }
}

to:到：

function toggleDiv() {
   document.getElementById('midcontent').style.display = "none";
   document.getElementById('m1').style.display = "block";
}

"i just want the div to stay block after refreshing" call the function on page load in html to make it execute after refresh of page: “我只希望 div 在刷新后保持块状”在 html 页面加载时调用该函数以使其在页面刷新后执行：

<body onLoad="toggleDiv()">
  <!-- Your html content -->
</body>

alternatively you can also do it in js:或者，您也可以在 js 中执行此操作：

document.addEventListener("DOMContentLoaded", function(event) {
    // Your code to run since DOM is loaded and ready
    toggleDiv()
});

If you want more in depth persistance and/or variable changes please provide additional information on how and why you want to do this exactly!如果您想要更深入的持久性和/或变量更改，请提供有关如何以及为什么要这样做的更多信息！ Hope it helps!希望能帮助到你！ :) :)

使用javascript显示/隐藏div

问题描述

1 个解决方案

解决方案1
0 2020-01-22 12:23:27

使用javascript显示/隐藏div

问题描述

1 个解决方案

解决方案1 0 2020-01-22 12:23:27

解决方案1
0 2020-01-22 12:23:27