jquery 实现选项卡

作者: blank的小粉er | 来源:发表于2017-09-04 18:07 被阅读0次

选项卡
Angularjs选项卡
jQuery（二）
jQuery操作及动画效果
jQuery操作及动画效果
jQuery操作及动画效果
2018-12-08
jQuery样式操作、选项卡
jQuery样式操作、选项卡
jquery 实现选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            font-size:16px;
        }
        ul{
            list-style:none;
            padding:0;
            margin:0;
        }
        .option_card{
            width:800px;
        }
        .options{
            border-left:1px solid #999;
            border-bottom:1px solid #999;
            height:40px;
        }
        .options li{
            height:39px;
            line-height:40px;
            float:left;
            padding:0 20px;
            border-right:1px solid #999;
            border-top:1px solid #999;
            background-color: #f5f5f5;
            cursor:pointer;

        }

        .options li.current{
            height:40px;
            background-color: #fff;
        }

        .card ul{
            height:400px;
            border:1px solid #999;
            border-top:none;
            padding:20px;
        }
        .card li{
            display:none;
        }
        .card li.current{
            display:block;
        }
    </style>
</head>
<body>
    <h1>选项卡</h1>
    <hr>

    <div class="option_card">
        <div class="options">
            <ul>
                <li class="current">未付款商品</li>
                <li>未发货商品</li>
                <li>未收货商品</li>
                <li>未评价商品</li>
                <li>未使用商品</li>
            </ul>
        </div>
        <div class="card">
            <ul>
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div>


    <script src="jQuery-1.12.4.min.js"></script>
    <script>
        $(function(){


            //单击事件
            $(".options li").click(function(){
                $(this).addClass('current').siblings().removeClass('current');

                //console.log($(this).index())
                $(".card li").finish().fadeOut(1000).delay(1000).eq($(this).index()).fadeIn(1000)
            })
        })
    </script>
</body>
</html>