当用户点击链接时隐藏/显示表单的元素

Question

我有一个带有一些输入文本和单选按钮的表单,我想显示当用户点击超链接时表单的其他一些元素,当用户再次点击时,隐藏它们.我怎样才能做到这一点？我认为jquery会做思考,但我不是一个javascript开发人员,所以我需要一些方向,非常感谢!

Answer 1

这是一个例子.如果您有以下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库的引用.希望这可以帮助!