Div hide / show toggle问题

时间:2014-08-03 21:38:35

标签: javascript html css hide show

我目前正在制作一个iphone webapp并且已经完成了它,我只需要修复这个小问题即可

我设法隐藏了一个div图层并显示另一个div图层,但是我想要的是同一个按钮然后显示我隐藏的图层并隐藏我再次点击时显示的图层。因此,基本上单击按钮会将其恢复到原始状态

我目前使用的代码是

<script type="text/javascript">


function toggle_layout(d)
{
    var onediv = document.getElementById(d);
    var divs=['Posts','Posts2'];

    for (var i=0;i<divs.length;i++)
    {
        if (onediv != document.getElementById(divs[i]))
        {
            document.getElementById(divs[i]).style.display='none';
        }
    }

    onediv.style.display = 'block';
}


</script>

它隐藏了一个我命名为“帖子”的div,并显示了一个名为“Posts2”的div,但再次单击它并不会改变效果。

如果您想查看我的网站http://a-m-creativecapture.tumblr.com/ 将不得不在手机上查看它,看看我在说什么。

2 个答案:

答案 0 :(得分:0)

您是否尝试过style.visibility(可见|隐藏)而不是style.display?

答案 1 :(得分:0)

假设你的div是这样的:

<div id="posts"></div>
<div id="posts2"></div>

您可以使用以下代码:

var posts = document.getElementById('posts'),
    posts2 = document.getElementById('posts2');

function toggle() {
    if (this == posts) {
        posts.style.display = 'none';
        posts2.style.display = 'block';
    } else {
        posts.style.display = 'block';
        posts2.style.display = 'none';
    }
}

div1.onclick = toggle;
div2.onclick = toggle;