1

我在显示和隐藏两个 div 时遇到问题。我有两个链接：“写帖子”和“发送消息”。出于某种原因，要让任一 div 出现，我必须单击该链接两次。我认为这可能是我试图在页面加载之前单击它，但这并没有解决问题。在页面加载时，将 div 设置为display:none，然后我使用 JS 修改样式属性。你可以在这里查看问题

这是我的 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>

谢谢！

4

4 回答 4

2

postand元素在send加载时似乎没有 style 属性。仅在css中没有帮助display:none，它需要应用于元素本身。

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

<div id="post" style="display: none;">
<div id="send" style="display: none;">
于 2012-08-09T13:33:04.417 回答
0

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

于 2012-08-09T13:34:38.853 回答
0

从 style.css 中删除“显示：无”

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

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

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

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

于 2012-08-09T13:34:53.887 回答
0

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

于 2012-08-09T13:36:23.870 回答