[2015-10-28]点击隐藏和显示-jquery和样式

1.简单的点击隐藏和显示----jquery实现

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.btn1').click(function(){
            if($('p').is(':hidden'))
            {
                $('p').slideDown('slow');
                $(this).text('收起');
            }
            else
            {
                $('p').slideUp('slow');
                $(this).text('展开');
            }
        });
    });
</script>
</head>
<body>
    <p>This is a paragraph.</p>
    <button class="btn1">Hide</button>
</body>
</html>

 2.display:none

<html>
<head>
    <title> New Document </title>
    <script LANGUAGE="JavaScript">
        var flag=true;
        function f_test()
        {
            var divContainer=document.getElementById('divContainer');
            // if(divContainer.style.display==""||divContainer.style.display=="block")
            if(flag)
            {
                divContainer.style.display="none";
            }
            else
            {
                divContainer.style.display="block";
            }
            flag=!flag;
        }
    </script>
</head>

<body>
    <input type='button' value="click it" onclick='f_test()'>
    <p id="divContainer">This is a paragraph.</p>
</body>
</html>

 

posted @ 2015-10-28 14:27  rysly  阅读(168)  评论(0)  编辑  收藏  举报