Javascript显示隐藏-将切换操作从复选框更改为<;a href>;链接
目前,我有一种基于表单复选框字段显示/隐藏div的方法,如下所示。但是,我不想使用表单来显示隐藏,而只是基于简单的链接调用show/hide函数。我希望我所做的一切都有意义。任何帮助/建议都是非常宝贵的Javascript显示隐藏-将切换操作从复选框更改为<;a href>;链接,javascript,Javascript,目前,我有一种基于表单复选框字段显示/隐藏div的方法,如下所示。但是,我不想使用表单来显示隐藏,而只是基于简单的链接调用show/hide函数。我希望我所做的一切都有意义。任何帮助/建议都是非常宝贵的 <!-- Show hide--> <script language="JavaScript"> function showhidefield() { if (document.goform.areas.checked) { document.getElementById
<!-- Show hide-->
<script language="JavaScript">
function showhidefield()
{
if (document.goform.areas.checked)
{
document.getElementById("areaone").style.display = "block";
document.getElementById("areatwo").style.display = "none";
}
else
{
document.getElementById("areaone").style.display = "none";
document.getElementById("areatwo").style.display = "block";
}
}
</script>
<form name="goform" id="goform" action="xxxx" method="post" enctype="multipart/form-data">
<label><input name="areas" type="checkbox" onclick="showhidefield()" value="1"> Yes </label>
</form>
<div id="areaone" style="display:none;">
Area One
</div><!-- / Hideable area -->
<div id="areatwo" style="display:block;">
Area two
</div>
函数showhidefield()
{
if(document.goform.areas.checked)
{
document.getElementById(“areaone”).style.display=“block”;
document.getElementById(“Area2”).style.display=“无”;
}
其他的
{
document.getElementById(“areaone”).style.display=“无”;
document.getElementById(“Area2”).style.display=“block”;
}
}
对
第一区
第二区
更改上述内容,使其具有基于事件的切换效果,而不是使用表单复选框来显示隐藏
<a href="xxx">Show Areaone / Hide Areatwo</a>
<a href="xxx">Show Areatwo / Hide Areaone</a>
一般方法
一般的方法是使用链接标记的onclick
属性。您可以直接在标记上设置,如下所示:
<a onclick="showhidefield()" href="javascript:void(0);">Show/Hide</a>
明亮的非常感谢你。非常感谢你的帮助@没问题。请务必查看我刚才添加的第二个示例,因为它更符合最佳实践。
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="areaone" style="display:none;">
Area one
</div>
<div id="areatwo" style="display:block;">
Area two
</div>
<script type='text/javascript'>
function showOneHideTwo(){
document.getElementById("areaone").style.display = "block";
document.getElementById("areatwo").style.display = "none";
}
function showTwoHideOne(){
document.getElementById("areaone").style.display = "none";
document.getElementById("areatwo").style.display = "block";
}
</script>
<a onclick="showOneHideTwo()" href="javascript:void(0);">Show one / Hide two</a>
<a onclick="showTwoHideOne()" href="javascript:void(0);">Show two / Hide one</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="areaone" style="display:none;">
Area one
</div>
<div id="areatwo" style="display:block;">
Area two
</div>
<a id='showOneLink' href=''>Show one / Hide two</a>
<a id='showTwoLink' href=''>Show two / Hide one</a>
<script type='text/javascript'> <!-- This allows for better placement of the script as well... -->
//Same functions as before
function showOneHideTwo(){
document.getElementById("areaone").style.display = "block";
document.getElementById("areatwo").style.display = "none";
}
function showTwoHideOne(){
document.getElementById("areaone").style.display = "none";
document.getElementById("areatwo").style.display = "block";
}
//this time, we set the onclick here
//this is better form- it keeps the content (html) and the scripting (javascript) seperate
document.getElementById("showOneLink").onclick = function(){showOneHideTwo(); return false;}
document.getElementById("showTwoLink").onclick = function(){showTwoHideOne(); return false;}
</script>
</body>
</html>