Jquery 隐藏显示层

最新推荐文章于 2024-03-06 09:53:52 发布

心如止静

最新推荐文章于 2024-03-06 09:53:52 发布

阅读量534

点赞数

本文链接：https://blog.csdn.net/qhx556/article/details/8892093

版权

<!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></title>
    <style type="text/css">
      #mydiv
        {
            width: 500px;
            height: 500px;

        }
        #divtitle
        {
            width: 500px;
            height: 20px;
            background-color: #999;
        }
        #divcontent
        {
            width: 500px;
            height: 480px;
            background-color: #666;
        }
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#spinfo').click(function () {
                if ($(this).text() == '隐藏') {
                    $('#divcontent').hide(2000, function () {
                        $('#spinfo').text('显示');
                    });
                }
                else {
                    $('#divcontent').show(2000, function () {
                        $('#spinfo').text('隐藏');
                    });
                }
            })
        })
    </script>
</head>
<body>
   <div id="mydiv">
        <div id="divtitle">
            <span id="spinfo">隐藏</span>
        </div>
        <div id="divcontent">
        </div>
    </div>
</body>
</html>