Question

得到了这个代码，我得到了一个隐藏的div，当用户点击其中一个单选按钮时，这些div被取消隐藏。我想要实现的是，当隐藏div变得可见时，按钮将被这个div推下来取决于潜水高度？完成这项工作的最佳方法是什么？

<head>     
    <script type="text/javascript"> 
        function displayForm(c){ 
            if(c.value == "1"){ 
                document.getElementById("form1").style.visibility='visible'; 
                document.getElementById("form2").style.visibility='hidden'; 
            } 
            else if(c.value =="2"){ 
                document.getElementById("form1").style.visibility='hidden'; 
                document.getElementById("form2").style.visibility='visible'; 
            }                            
        }         
    </script>     
<style type="text/css">
#divOne{
    position:absolute;  
    width:70px;
    height:150px;
    border: 1px solid #000;
}
</style>
</head> 
<body> 
    <form> 
        <label>Form 1<input value="1" type="radio" name="formselector"     onclick="displayForm(this)" /></label>     
        <label>Form 2<input value="2" type="radio" name="formselector" onclick="displayForm(this)" /></label>     
    </form> 

    <div style="visibility:hidden" id="form1"> 
        <div id="divOne"> Message 1 </div>
    </div>
    <div style="visibility:hidden" id="form2"> 
        <div id="divOne"> Message 2 </div>
    </div>  

    <div>
        <input type="submit" value="ClickMe"/>
    </div>
</body>

Answer 1

看看这个：http://jsfiddle.net/WU9ZJ/2/ 你需要使用display：none;和显示：块; 删除位置：绝对;来自#divOne

这应该是你的功能：

function displayForm(cElem)
{ 
     if(cElem.value == "1"){ 
         document.getElementById("form1").style.display = 'block'; 
         document.getElementById("form2").style.display = 'none'; 
     } 
     else if(cElem.value =="2"){ 
         document.getElementById("form1").style.display = 'none'; 
         document.getElementById("form2").style.display = 'block'; 
     }                            
 }

这应该是你的HTML：

<div style="display:none;clear:both;" id="form1"> 
        <div id="divOne"> Message 1 </div>
    </div>
    <div style="display:none;clear:both;" id="form2"> 
        <div id="divOne"> Message 2 </div>
    </div>

Answer 2

尝试使用css [display]属性而不是[visibility]。

display : none;

当隐藏的div变得可见时，下推内容？

2 个答案: