滑动选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .btns input{
            width: 100px;
            height: 40px;
            background-color: grey;
            border: 0;
        }

        .btns .current{
            background-color: gold;
        }

        .cons .slides div{
            width: 500px;
            height: 300px;
            background-color: gold;
            /*display: none;!*整体都不显示了*!*/
            text-align: center;
            line-height: 300px;
            font-size: 30px;
            float: left;/*把三个div由隐藏改为浮动*/
        }
        
        .cons{
            width: 500px;
            height: 300px;
            overflow: hidden; /*超过cons的slide隐藏*/
            position: relative;/*相对于slide绝对定位*/
        }

        .slides{
            width: 1500px;
            height: 300px;  /*把slide加长*/
            position: absolute;/*相对于cons相对定位*/
        }

        .cons .active{
            display: block;
        }
    </style>

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $btn=$('.btns input');
            var $slides=$('.cons .slides');
            // alert($btn.length);
            // alert($div.length);

            $btn.click(function () {
                // 我点击哪一个按钮，$(this)就指的是谁,而this
                //指的是原生的，$（this）指的是JQuery的
                // $(this).siblings().removeClass('current');
                // $(this).addClass('current');//可以用链式调用
                $(this).addClass('current').siblings().removeClass('current');
                // var num=$(this).index();
                // $div.eq($(this).index()).addClass('active').sibling().removeClass('active');
                $slides.animate({left:(-500*$(this).index())});
            })
        })
    </script>
</head>
<body>
    <div class="btns">
        <input type="button" name="" value="01" class="current">
        <input type="button" name="" value="02">
        <input type="button" name="" value="03">
    </div>

    <div class="cons">
        <div class="slides">
            <div >选项卡1的内容</div>
            <div>选项卡2的内容</div>
            <div>选项卡3的内容</div>
        </div>
    </div>
</body>
</html>

将slides下面的div由隐藏改为浮动，将cons设置成绝对定位，将slides改为相对定位。超过cons的slides隐藏。
点击事件发生之后，相对定位改变。

animate动画

			$div=$('#div1');
            $div.animate({
                width:300,
                height:300
            },1000,'swing',function () {
                alert('done');
            })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $box=$('.box');
            $box.animate({
                width:300,
                height:300
            },1000,'swing',function () {
                alert('done');
            })
        })
    </script>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

用animate动画改变box大小，完成之后用回调函数弹出done

JQuery的animate动画

滑动选项卡

animate动画

猜你喜欢