当用户点击一个链接时隐藏/显示表单的元素
问题描述:
我有一个带有一些输入文本和单选按钮的表单,当用户点击表单的其他元素时,以及当用户点击再次,隐藏它们。我怎样才能做到这一点?我认为jquery会做这个想法,但我不是一个JavaScript开发人员,所以我需要一些指导,非常感谢!当用户点击一个链接时隐藏/显示表单的元素
答
下面是一个例子。如果你有以下的html:
<p>Click on the gray 'button' below.</p>
<div id="ThingOne">
Hi, I'm thing one!
<div id="ButtonOne" style="background-color: Gray; width: 100px">Show Thing Two</div>
</div>
<div id="ThingTwo">
Hello, I'm thing two!
<div id="ButtonTwo" style="background-color: Gray; width: 100px">Show Thing One</div>
</div>
然后你可以使用下面的jquery。
<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#ButtonOne").click(function() {
$("#ThingTwo").fadeIn("slow");
$("#ThingOne").fadeOut("slow");
});
$("#ButtonTwo").click(function() {
$("#ThingOne").fadeIn("slow");
$("#ThingTwo").fadeOut("slow");
});
$("#ButtonOne").click();
});
</script>
请注意对.click()的调用,它会在第一次执行时隐藏ButtonTwo div。另外,您需要根据需要更新对JQuery库的引用。希望这可以帮助!
答
如果这是你的超级链接:<a id="hideshowlink">Link</a>
绑定超链接点击事件,然后隐藏或显示你在那里要的元素。因此$('input:radio').toggle();
将根据当前状态隐藏或显示所有单选按钮(即,如果它们隐藏,则显示,反之亦然)。
$(document).ready(function() {
$('#hideshlowlink').click(function() {
$('input:radio').toggle();
$('#idofelementsToHideShow').toggle();
});
});
如果您将所有这些元素都放在div或某个容器中,那么只需在click事件内切换容器即可。否则,您可以自行切换每个元素。
答
你需要的东西是这样的:
$("#linkid").click(function() {
$("#togglediv").toggle()
})
而且你可能想要把href='#'
到<a >
标签了。
或者,你可以做这样的事情:
$("#linkid").toggle(function(event) {
event.preventDefault()
$("#togglediv").show()
}, function(event) {
event.preventDefault();
$("#togglediv").hide()
})
这样做的好处是可以调用其他JS处理上显示或隐藏,可能是特定的节目或特定于一躲,等改变链接的文字。