css3+jquery写一个选项卡 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-1.10.2.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, ol, li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .container {
            width: 500px;
            margin: 50px auto;
            overflow: hidden;
        }

        .container #ul {
            background-color: #FFC0CB;
        }

        #ul li {
            display: inline-block;
            padding: 6px 18px;
            cursor: pointer;
        }

        #ul li.curr {
            background-color: #00FFFF;
        }

        #inner {
            height: 160px;
            width: 100%;
            background-color: #00FFFF;
            font-size: 20px;
            position: relative;
        }

        #inner .tab {
            width: 100%;
            height: 100%;
            padding: 20px 30px;
            position: absolute;
            left: 0;
            top: 0;
            transform: translateX(-100%);
        }

        #inner .tab.on {
            transform: translateX(0);
            transition: all 1s;
        }

        #inner .tab.on ~ .tab {
            transform: translateX(100%);
        }
    </style>
    <script>
        $(function () {
            $.each($("#ul").find("li"), function (num) {
                $(this).click(function () {
                    $(this).addClass("curr").siblings().removeClass("curr")
                    $(".tab").eq(num).addClass("on").siblings().removeClass("on")
                })
            })
        })

    </script>
</head>
<body>
<section class="container">
    <ul id="ul">
        <li class="curr">往右边出现</li>
        <li>往左边</li>
        <li>往左边</li>
        <li>往左边</li>

    </ul>
    <div id="inner">
        <div class="tab on">往右边</div>
        <div class="tab">往左边</div>
        <div class="tab">往左边</div>
        <div class="tab">往左边</div>
    </div>
</section>
</body>
</html>
posted @ 2017-08-03 09:49  可以叫我老张  阅读(259)  评论(0)  编辑  收藏  举报