您的位置：首页 > Web前端 > JQuery

点击show()和hide()方法显示和隐藏元素，自身也换值

2014-11-02 11:19 633 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  function jquery class javascript html
相关文章推荐
新的分享
章节导航