нажмите вниз, когда скрытый div станет видимым?

Получил этот код, и я получил скрытые divs, которые невидимы, когда пользователь нажимает на одну из переключателей. То, что я хотел бы достичь, заключается в том, что, когда hide 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>

источник

2014-01-18 macrog

вам нужно иметь ли 'положение: absolute'? Если вы избавитесь от этого утверждения, все будет работать. – MMM

колодец без положения: абсолютный; div, отверстие которого кнопка сразу идет вниз, а другие скрытые divs также показывают один под другим, но это не то, что я хочу, я хочу, чтобы они всегда находились на одном и том же месте на странице, независимо от того, какой из них выбрано, чтобы быть видимым, и я хочу, чтобы кнопка опускалась, когда div виден. – macrog

Посмотрите на это: http://jsfiddle.net/WU9ZJ/2/ Вы должны использовать дисплей: нет; и отображение: блок; Удалить позицию: абсолютная; от #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>

источник

2014-01-19 09:50:20 kleinohad

Попробуйте использовать CSS [Display] свойство вместо [видимость].

display : none;

источник

2014-01-19 09:24:30

нажмите вниз, когда скрытый div станет видимым?

ответ

Смежные вопросы