[英]Javascript Show Hide - Changing toggle action from Checkbox to <a href> links
currently I have a method of showing / hiding a div based on a form checkbox field as per below. 目前,我有一种显示/隐藏基于下面的表单复选框字段的div的方法。 What I do want however is to not use a form to show hide rather just call the show / hide function based on a simple on a link .
但是我想要的是不使用表单来显示隐藏,而只是基于简单的链接调用show / hide函数。 I hope this makes sense what I am attempting to do.
我希望这是合理的,我正在尝试做。 Any help /advice would be really valued!
任何帮助/建议都将非常有价值!
<!-- 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>
Changing the above so that rather than using a form checkbox to showhide, have a toggle effect based on event eg 更改上面的内容,以便不使用表单复选框进行显示,而是根据事件产生切换效果,例如
<a href="xxx">Show Areaone / Hide Areatwo</a>
<a href="xxx">Show Areatwo / Hide Areaone</a>
The general approach is to use the onclick
property of link tags. 通用方法是使用链接标记的
onclick
属性。 You can set this directly on the tag like this: 您可以像这样直接在标签上设置:
<a onclick="showhidefield()" href="javascript:void(0);">Show/Hide</a>
Here's a full working example: 这是一个完整的工作示例:
<!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>
However, for a variety of reasons , it is preferable, if slightly less intuitive, to use javascript to set the onclick
property instead of adding it to the html directly. 但是,由于种种原因 ,最好是使用javascript来设置
onclick
属性,而不是直接将其添加到html中,如果不太直观的话。 Here is a better full working example: 这是一个更好的完整工作示例:
<!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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.