Показать / скрыть форму в зависимости от нажатой гиперссылки - PullRequest
Новая
       30

Показать / скрыть форму в зависимости от нажатой гиперссылки

2 голосов
/ 31 декабря 2011

Я сделал 3 разные формы, и каждая форма содержит div с тем же именем класса, что и в других формах.(поэтому они перекрываются)

Я также сделал раздел ссылок с тремя ссылками, чтобы выбрать, какой div / форму следует показывать, но я не могу заставить ее работать.

Я перепробовал много вещей, но самым близким, что я пришел, было нажатие на ссылку и отображение div в течение менее чем секунды.Пожалуйста, помогите.

Я создал новый код, та же концепция, но исходный код, вероятно, был слишком длинным для размещения здесь. 

<body>
<div class="links">
<table>
<tr><td><a href="" onclick="showdiv('first','second','third')" >first</a></td></tr>
<tr><td><a href="" onclick="showdiv('second','first','third')" >second</a></td></tr>
<tr><td><a href="" onclick="showdiv('third','second','first')" >Third</a></td></tr>
</table>
</div>
<form name="first">
<div id="first" class="content">
-------------
</div>
</form>
<form name"second">
<div id="second" class="content">
//////////////
</div>
</form>
<form name="third">
<div id=third class="content">
++++++++++++++
</form>
 <script type="text/javascript">
 function hide_all(){
    document.getElementById("first").style.display='none';
    document.getElementById("second").style.display = 'none';
    document.getElementById("third").style.display = 'none';
}
hide_all()
    function showdiv(a,b,c) {
    document.getElementById(a).style.display='block';
    document.getElementById(b).style.display = 'none';
    document.getElementById(c).style.display = 'none';      
}
</script>
 </body>
 </html>

Как вы, вероятно, видите, я новичок в html и javascript:) * +1010 *

Ответы [ 4 ]

0 голосов
/ 12 января 2014

Вместо передачи всех трех идентификаторов передают только идентификатор элемента для отображения, а перед показом элемента скрывают все элементы по классу: 

function showdiv(idToHide) {
   var array = document.getElementsByClassName('content');
   for(var i = 0; i < array.length; i++)
   {
     array[i].style.display = 'none';
   }
   document.getElementById(idToHide).style.display='';
}

и назовите его: 

<table>
<tr><td><a href="" onclick="showdiv('first')" >first</a></td></tr>
<tr><td><a href="" onclick="showdiv('second')" >second</a></td></tr>
<tr><td><a href="" onclick="showdiv('third')" >Third</a></td></tr>
</table>
0 голосов
/ 31 декабря 2011

#link - это идентификатор нажатой ссылки, и у каждой ссылки есть имя класса с именем .links. После того, как вы перейдете по ссылке, ссылка будет скрыта, а другие ссылки будут показаны 

$('#link').click(function(){
   $('.links').css('visibility', 'visible');
   $(this).css('visibility', 'hidden');
})

КакЯ не вижу вашего кода, предположим, что это может помочь.

0 голосов
/ 12 января 2014 
document.getElementById("id").style.visibility="show"

также работает, чтобы снова увидеть.

0 голосов
/ 31 декабря 2011

Вы пробовали: 

document.getElementById("id").style.visibility="hidden"
...