1

单击时显示的我的隐藏（切换）div 创建基于以下 div 的边距。我尝试为隐藏 div 的所有内容设置负边距，但它看起来有点笨拙，我相信有一个更优雅的解决方案。

有什么建议么？

<html>
    <head>
        <script type="text/javascript">
            function toggle_visibility(id) {
                var e = document.getElementById(id);
                if(e.style.display == 'block')
                    e.style.display = 'none';
                else
                    e.style.display = 'block';
            }
        </script>

        <style>
            body {
                margin:0; 
                width:100%; 
                height:100%
            }
            #first {
                z-index:1; 
                position:relative; 
                display:block;width:25%; 
                height:10%; 
                background-color:#F00; 
                float: left
            }
            #second {
                z-index:1;
                position:relative; 
                display:block;
                width:25%; 
                height:10%; 
                background-color:#FF0; 
                float: left
            }
            #first_hidden {
                display:none;
                z-index:10;
                position:relative; 
                width:100%;
                height:100%;
                background-color:#0F0
            }
            #second_hidden {
                display:none;
                z-index:10;
                position:relative; 
                width:100%; 
                height:100%; 
                background-color:#F0F;
            }
        </style>
    </head>
    <body>
        <div id="first">
            <a href="#" onclick="toggle_visibility('first_hidden');toggle_visibility('first_hidden_none');">First</a>
        </div>
        <div id="first_hidden"> 
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus non massa nec porta. Sed mollis aliquam dui at egestas.</p>
            <a href="#"onclick="toggle_visibility('first_hidden');toggle_visibility('first_hidden_none');"><-Back1</a>
        </div>

        <div id="second">
            <a href="#" onclick="toggle_visibility('second_hidden');toggle_visibility('second_hidden_none');">Second</a>
        </div>
        <div id="second_hidden"> 
            <p>Nulla id mauris volutpat, elementum urna suscipit, tempor diam. Sed semper metus purus, vel luctus nulla rutrum eu. Nulla id.</p>
            <a href="#" onclick="toggle_visibility('second_hidden');toggle_visibility('second_hidden_none');"><-Back2</a>
        </div>
    </body>
</html>
4

1 回答 1

0

您必须使用 a或on或 reset on保持<div>默认值。测试一下：margin:1em 0;<p>paddingborder<div>margin:0;<p>

div {padding:1px;}

http://liveweave.com/B8D32x

于 2013-06-27T09:41:05.470 回答