时间戳

首页 > 解决方案 > 隐藏一个 div 并显示另一个

javascript - 隐藏一个 div 并显示另一个

问题描述

我试图将一个 div 设置为 none，另一个设置为阻止，这样一个会消失，另一个会显示。但是当我运行代码时，它说：无法读取 null 的属性“样式”。我仍然是初学者，但我真的不知道我在这里做错了什么

function test(div1,div2)  
{  
    var= d1 = document.getElementById(div1);  
    var= d2 = document.getElementById(div2);  
    if( d2.style.display == "none" )  
   {  
    d1.style.display = "none";  
    d2.style.display = "block";  
   }  
    else  
   {  
    d1.style.display = "block";  
    d2.style.display = "none";  
   }  
}

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="js.js"></script>
    <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>

<div id= "div1"> 
    <h1>Hoi ik ben een div<h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id= "div2">
    <h2>hoi ik ben 2e div<h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<button onclick="test()">click</button>

</body>
</html>

CSS

#div1{
    width: 70%;
    height: 70%;
    background-color: blue;
}
#div2{
    width: 80%;
    height: 80%;
    background-color: green;
    display: none;
}

标签： javascriptcss

解决方案

调用函数为

test('div1','div2')

或改变这个

var= d1 = document.getElementById(div1);  
var= d2 = document.getElementById(div2);

对此

var d1 = document.getElementById('div1');  
var d2 = document.getElementById('div2');

无论哪种情况，您都必须更改var=为var.

推荐阅读