动画效果 详情请看 jQuery api 动画收放 slideUp slideDown 通过id class 来设置 jQuery实现效果 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #boss{
            margin:auto ;
            width: 500px;
            background-color:#C48698;
            border: 2px;
        }
        #boss ul li {
            list-style: none;
        }
        #boss ul li div {
            display: none;
            height: 500px;
            /**/
        }
        p{
            margin-top: 2px;
            width: 500px;
            height:50px;
            background-color:#f9f9f9;
            border:2px #4eac30;
        }
    </style>
    <script src="jquery-3.2.0.min.js"></script>
</head>
<body>
<div id="boss"  >
    <ul id="ul">
        <li>
            <p class="p1"> </p>
            <div id="div1" class="sjb"></div>
        </li>
        <li>
            <p class="p2"> </p>
            <div id="div2" class="sjb"></div>
        </li>
        <li>
            <p class="p3"> </p>
            <div id="div3" class="sjb"></div>
        </li>
    </ul>
</div>
<script>
    $('.p1').click(function(){
        $('.sjb').slideUp();
        $("#div1").slideDown();
        $("#div1").css({
            backgroundColor:'#79ADA5'
        });
    });
    $('.p2').click(function(){
        $('.sjb').slideUp();
        $("#div2").slideDown();
        $("#div2").css({
            backgroundColor:'#2C677E'
        });
    });

    $('.p3').click(function(){
        $('.sjb').slideUp();
        $("#div3").slideDown();
        $("#div3").css({
            background:'#29315D'
        });
    });

</script>
</body>
</html>
posted @ 2017-07-05 16:01  nozuonodai  阅读(296)  评论(0)  编辑  收藏  举报