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 に答える