根据点击的超链接显示/隐藏表单答案

【问题标题】：Show/hide form depending on hyperlink clicked根据点击的超链接显示/隐藏表单
【发布时间】：2011-12-31 18:18:45
【问题描述】：

我制作了 3 种不同的表单，每个表单都包含一个与其他表单具有相同类名的 div。（所以它们重叠）

我还创建了一个链接部分，其中包含三个链接来选择应该显示哪个 div/form，但我无法让它工作。

我尝试了很多方法，但最接近的方法是单击一个链接并让 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 的新手 :)

【问题讨论】：

您能发布您尝试过的内容吗？
请分享代码以便于理解。 :)

标签： javascript html forms hyperlink visible

【解决方案1】：

#link是被点击链接的ID，每个链接都有一个名为.links的类名。

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

由于我看不到您的代码，因此假设这可能会有所帮助。

【讨论】：

【解决方案2】：

你试过了吗：

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

【讨论】：

起初我做了，但后来我使用了 document.getElementById("id").style.display="none"/"block" 但后来我再也看不到它了。
要让它再次可见，只需使用 visibility="visible"

【解决方案3】：

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

也可以再次可见。

【讨论】：

【解决方案4】：

除了传递所有三个 id 之外，只传递要显示的元素的 id，在显示元素之前按类隐藏所有元素：

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>

【讨论】：