JQuery基础学习(二) 实现隐藏和显示元素

JQuery中隐藏和显示元素分别使用hide和show方法，或者使用toggle方法。

但是在隐藏和显示过程中我们要对一个按钮的文本进行修改

方法一：

使用toggle方法自动切换隐藏显示状态

View Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>显示隐藏</title>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Button2").click(function () {
                var ss = $("#test1");
                var btn = $("#Button2");
                //ss.show()
                ss.toggle();
                //alert(ss.css("display"));
                if (ss.css("display") == "none") {
                    btn.val("显示");
                }
                else if (ss.css("display") == "block") {
                    btn.val("隐藏");
                }
            })
        }
            );
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="test1" style="height:100px;">
                Hello!</div>
            <input id="Button2" type="button" value="隐藏" />
    </div>
    </form>
</body>
</html>

方法二：

使用hide和show方法，并使用CallBack事件。

View Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>显示隐藏</title>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function toggle()
        {
            var ss = $("#test1");
            //如果元素为隐藏状态就显示，反之则隐藏，同时修改按钮文本
            if (ss.css("display") == "none") {
                ss.show("slow", ChangebtnText("隐藏"));
            }
            else if (ss.css("display") == "block") {
                ss.hide("fast", ChangebtnText("显示"));
            }
        }
        function ChangebtnText(str)
        {
            var btn = $("#Button2");
            btn.val(str);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="test1" style="height:100px;">
                Hello!</div>
            <input id="Button2" onclick="toggle()" type="button" value="隐藏" />
    </div>
    </form>
</body>
</html>