首页手记移动端自适应tab切换效果

移动端自适应tab切换效果

标签：

Html/CSS JQuery CSS3

通过jQuery与css过渡效果实现移动端tab切换，支持标题栏1至5个tab
// TODO
左右滑动时效果切换，显示的content通过marign-left来控制

三个tab代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>tab切换效果</title>

    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
</head>

<style type="text/css">
    html, body {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        font-size: 50px;
    }
    .xl-tab {
        position: relative;
        width: 100%;
    }
    .xl-tab-head {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: .7rem;
        box-sizing: border-box;
        text-align: center;
        line-height: .7rem;
        font-size: 0;
    }
    .xl-tab-head-title {
        display: inline-block;
        box-sizing: border-box;
        font-size: .24rem;
        border-right: 1px solid #f3f3f3;
        border-bottom: 1px solid #f3f3f3;
    }
    .xl-tab-head-title-active {
        border-bottom: 1px solid #fc7831;
    }
    .xl-tab-head-title-1 {
        width: 100%;
    }
    .xl-tab-head-title-2 {
        width: 50%;
    }
    .xl-tab-head-title-3 {
        width: 33.33%;
    }
    .xl-tab-head-title-4 {
        width: 25%;
    }
    .xl-tab-head-title-5 {
        width: 20%;
    }
    .xl-tab-content {
        position: absolute;
        top: .7rem;
        width: 100%;
        height: 100%;
        font-size: .24rem;
        text-align: center;
        line-height: 2;
    }
    .xl-tab-content-1 {
        margin-left: 0px;
    }
    .xl-tab-content-2 {
        margin-left: 100%;
    }
    .xl-tab-content-3 {
        margin-left: 200%;
    }
    .xl-tab-content-4 {
        margin-left: 300%;
    }
    .xl-tab-content-5 {
        margin-left: 400%;
    }
        .xl-tab-title-transition {
        -webkit-transition: background .3s ease;
        -moz-transition: background .3s ease;
        transition: background .3s ease;
    }
    .transition {
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        transition: all .3s ease;
    }
</style>
<script>
        (function () {
            document.addEventListener('DOMContentLoaded', function () {
                var html = document.documentElement;
                var windowWidth = html.clientWidth;
                html.style.fontSize = windowWidth / 6.4 + 'px';
                 // 等价于html.style.fontSize = windowWidth / 640 * 100 + 'px';
            }, false);
        })();
</script>
<body>
    <div class="xl-tab">
        <div class="xl-tab-head">
            <span class="xl-tab-head-title xl-tab-head-title-3 xl-tab-head-title-active xl-tab-title-transition" id='xl-tab-head-title-1'>tab1</span>
            <span class="xl-tab-head-title xl-tab-head-title-3 xl-tab-title-transition" id='xl-tab-head-title-2'>tab2</span>
            <span class="xl-tab-head-title xl-tab-head-title-3 xl-tab-title-transition" id='xl-tab-head-title-3'>tab3</span>
        </div>
        <div class="xl-tab-content xl-tab-content-1 transition">1</div>
        <div class="xl-tab-content xl-tab-content-2 transition">2</div>
        <div class="xl-tab-content xl-tab-content-3 transition">3</div>
    </div>
</body>

<script type="text/javascript">
    $(document).ready(function() {
        $('.xl-tab-head-title').click(function() {
            var id = $(this).attr('id');
            var index = id.substr(id.length - 1);
            var contentClass = 'xl-tab-content-' + index;

            var preActive = $('.xl-tab-head-title-active:first').attr('id');
            var preIndex = preActive.substr(preActive.length - 1);
            var len = index - preIndex;
            $('.xl-tab-content').each(function() {
                var marginLeft = $(this).css('margin-left');
                console.log(len)
                var contentWidth = $('.xl-tab-content').width();
                marginLeft = marginLeft.substr(0, marginLeft.length - 2) - len * contentWidth;
                $(this).css({'margin-left': marginLeft + 'px'});
            });
            $('.xl-tab-head-title-active').removeClass('xl-tab-head-title-active');
            $(this).addClass('xl-tab-head-title-active');
        });
    });
</script>

</html>

点击查看更多内容