jQuery小练习1-1

1. tap切换

<div class="container">
        <ul class="title">
            <li class="active">蛋糕</li>
            <li>蛋糕1</li>
            <li>蛋糕2</li>
        </ul>
        <ul class="content">
            <li style="display: block;">蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕</li>
            <li>冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋</li>
            <li>巧克力巧克力巧克力巧克力巧克力巧克力巧克力巧克力</li>
        </ul>
    </div>

<script>
        $(function(){
            $('.title li').click(function(){
                $(this).addClass('active').siblings('.active').removeClass('active')
                $('.content li').eq($(this).index()).show().siblings().hide() 

            }).mouseenter(function(){
                $(this).css('color','blue')

            }).mouseleave(function(){
                $(this).css('color','#000')
                
            })

        })
    </script>