使用javascript显示/隐藏div_Javascript

使用javascript显示/隐藏div

javascript

使用javascript显示/隐藏div,javascript,Javascript,我有两个div，一个是隐藏的，另一个是可见的。我正在使用cssdisplay:none先隐藏，然后使用style.display=“block” 当我刷新页面时，它在地址栏中给出了相同的div名称，但div是隐藏的。我只是希望div在刷新或提交div内的表单后保持阻塞状态 <html> <head> <meta charset="utf-8"> <title>Sample</title> <style> #content

我有两个div，一个是隐藏的，另一个是可见的。我正在使用css

display:none

先隐藏，然后使用

style.display=“block”
当我刷新页面时，它在地址栏中给出了相同的div名称，但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>


样品
#内容{
弹性：8；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
弹性基准：100%；
填充：0 10px 0x 10px；
文本对齐：居中；
}
#左导航{
弹性：1；
填充顶部：20px；
}
#中庸的{
弹性：9；
文本对齐：居中；
填充顶部：20px；
显示：块；
}
#左导航{
显示：块；
边际：0px；
填充：0px；
列表样式类型：无；
}
#m1、#m2、#m3{
弹性：9；
文本对齐：居中；
填充顶部：20px；
显示：无；
}





主页
部门m1
分区m2
部门m3
var d=document.getElementById（'midcontent'）；
var d1=document.getElementById（'m1'）；
var d2=document.getElementById（'m2'）；
var d3=document.getElementById（'m3'）；
函数div1（）{
如果（d.style.display==“块”）{
d、 style.display=“无”；
d1.style.display=“块”；
}否则{
d、 style.display=“无”；
d1.style.display=“块”；
d2.style.display=“无”；
d3.style.display=“无”；
}
}
函数div2（）{
如果（d.style.display==“块”）{
d、 style.display=“无”；
d2.style.display=“块”；
}否则{
d、 style.display=“无”；
d1.style.display=“无”；
d2.style.display=“块”；
d3.style.display=“无”；
}
}
函数div3（）{
如果（d.style.display==“块”）{
d、 style.display=“无”；
d3.style.display=“块”；
}否则{
d、 style.display=“无”；
d1.style.display=“无”；
d2.style.display=“无”；
d3.style.display=“块”；
}
}
更改：
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";
    }
}

致：
“我只想让div在刷新后保持阻塞”在html页面加载时调用函数，使其在页面刷新后执行：
<body onLoad="toggleDiv()">
  <!-- Your html content -->
</body>

如果您想要更深入的持久性和/或变量更改，请提供有关如何以及为什么要这样做的其他信息！希望有帮助！：） 撇开刷新问题不谈，为什么要使用if{}else{}如果你在最后做的是完全相同的事情，不管发生什么？是的，当你刷新一个网页时，所有状态都会丢失，你需要将状态存储在一个持久的地方，以便在刷新期间保持。“我只希望div在刷新后保持阻塞状态”-如果要将信息从一个页面加载保存到另一个页面加载，则需要将该信息存储在页面之外。可能在本地存储、cookie、服务器端等中。“当我刷新页面时，它在地址栏中给出了相同的div名称”-请解释您的实际含义。我假设您引用的是某个元素的ID，该元素显示为散列/片段？然后，您应该向我们展示您的代码，它首先实现了这一点。提供一个示例来说明整个问题，而不仅仅是一些没有太多上下文的脚本片段。我给出了一个完整的示例，当我刷新它时，它会转到主页，而我需要当前div保持显示。如果没有输入数据，您的onload处理程序将无法运行。这并不能真正回答问题。很明显，OP想要解析上述数据的URL。从那时起，这个问题已经被编辑了无数次。当我最初发布时，我能做的就是他希望在页面上刷新divs，以便在DOM准备好后以这种方式切换，我已经为他提供了一个答案。正如我在回答结束时所说的，“如果您想要更深入的持久性和/或变量更改，请提供更多信息”，因此OP可以提供更多信息。我们真的看不懂他的心思。如果他想解析一个URL并使用它，没问题。但他需要说明这一点，并向我们提供有关params等的信息：）
<body onLoad="toggleDiv()">
  <!-- Your html content -->
</body>

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