天天看點

點選show()和hide()方法顯示和隐藏元素,自身也換值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>使用show()和hide()方法顯示和隐藏元素</title>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

</head>

<body>

    <h3>使用show()和hide()方法顯示和隐藏元素</h3>

    <div>

        <h4>我喜歡吃的水果</h4>

        <ul>

            <li>蘋果</li>

            <li>甘桔</li>

            <li>梨</li>

        </ul>

        <input id="hidval" type="hidden" value="0"/>

    </div>

    <script type="text/javascript">

        $(function () {

            $("h4").bind("click", function () {

                if ($("#hidval").val() == 0) {

                    $("ul").show();

                    $("#hidval").val(1);

                    $(this).html("我不喜歡的水果");

                } else {

                    $("ul").hide();

                    $("#hidval").val(0);

                    $(this).html("我喜歡的水果");

                }

            });

        });

    </script>

</body>

</html>

繼續閱讀