Question

我在显示和隐藏两个div时遇到问题。我有两个链接：“写邮件”和“发送邮件”。出于某种原因，要显示任何div，我必须单击链接两次。我认为可能是因为我在页面加载之前尝试点击它，但这并没有解决问题。在页面加载时，div设置为display:none然后我使用JS来修改样式属性。您可以查看问题here

这是我的JavaScript代码：

    <script type="text/javascript" />
    function showPost(id) {
if(document.getElementById('post').style.display == 'block' && id == 'send') {
    document.getElementById('post').style.display = 'none';
    document.getElementById(id).style.display = 'block';
}
else if(document.getElementById('send').style.display == 'block' && id == 'post') {
    document.getElementById('send').style.display = 'none';
    document.getElementById(id).style.display = 'block';
}
else if(document.getElementById(id).style.display == 'none') {
    document.getElementById(id).style.display = 'block';
}
else {
    document.getElementById(id).style.display = 'none';
}
    }
    </script>

谢谢！

Answer 1

post和send元素似乎没有加载样式属性。仅在css中使用display:none没有帮助，它需要应用于元素本身。

向两个元素添加style="display:none;"将解决您的问题。

<div id="post" style="display: none;">
<div id="send" style="display: none;">

Answer 2

由于您使用的是CSS，因此我不认为element.style.display正在寻找与该元素相关联的样式。因此，我相信在第一次点击时，您的功能默认为else条件，从而将单击的元素的显示样式设置为“无”＃。这意味着在第二次单击时，将满足第一个条件之一，然后您的功能将正常工作。尝试使用内联样式：）

Answer 3

从style.css中删除“display：none”

#post, #send {
width: 166.5%;
height: 195px;
border: 3px solid #DDD;
background: #E7EBF2;
margin-left: -67%;
margin-top: -107px;
/*display: none;*/
}

在您的HTML中为div添加style="display:none"（发布和发送）

<div id="post">至<div id="post" style="display:none">

<div id="send">至<div id="send" style="display:none">

Answer 4

document.getElementById（'post'）。style.display / document.getElementById（'send'）。style.display返回空字符串，因此第一次执行条件。

显示/隐藏JavaScript的问题

4 个答案: