tabslider实现手机端移动端选项卡切换效果代码-html代码-BFW代码库

代码语言：html

所属分类：选项卡

代码描述：tabslider实现手机端移动端选项卡切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    <style>
        * {
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    }
    
    html {
    	-ms-touch-action: none;
    }
    
    body,ul,li {
    	padding: 0;
    	margin: 0;
    	border: 0;
    	list-style:none
    }
    
    body {
    	font-size: 12px;
    	font-family: ubuntu, helvetica, arial;
    }
    #wrapper {
    	margin:10px;
    	background: #fff;
    }
    * {-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;outline:0;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}
    /***************************/
    .tabSlider-transition{
    	transition: transform 0ms ease; 
    	-ms-transition: -ms-transform 0ms ease; 
    	-moz-transition: -moz-transform 0ms ease;
    	-webkit-transition: -webkit-transform 0ms ease;
    	-o-transition: -o-transform 0ms ease;
    }
    .tabSlider-animate{
    	transition: transform 400ms ease; 
    	-ms-transition: -ms-transform 400ms ease; 
    	-moz-transition: -moz-transform 400ms ease;
    	-webkit-transition: -webkit-transform 400ms ease;
    	-o-transition: -o-transform 400ms ease;
    }
    .tabSlider .tabSlider-hd {
    	background-color: transparent;
    	border: 1px solid #007aff;
    	border-radius: 3px;
    	display: table;
    	font-size: 15px;
    	font-weight: 400;
    	overflow: hidden;
    	position: relative;
    	table-layout: fixed;
    	width: 100%;
    }
    .tabSlider .tabSlider-hd li {
    	padding: 10px 0;
    	cursor:pointer;
    	border-color: #007aff;
    	border-left: 1px solid #007aff;
    	color: #007aff;
    	display: table-cell;
    	line-height: 1;
    	overflow: hidden;
    	padding-bottom: 7px;
    	padding-top: 6px;
    	text-align: center;
    	text-overflow: ellipsis;
    	transition: background-color 0.1s linear 0s;
    	white-space: nowrap;
    	width: 1%;
    }
    .tabSlider .tabSlider-hd li:first-child {
    	border-left-width: 0;
    }
    .tabSlider .tabSlider-hd li.curr {
    	background-color: #007aff;
    	color: #fff;
    }
    .tabSlider .tabSlider-hd.line {
    	border: 0 none;
    	border-radius: 0;
    	width: 100%;
    }
    .tabSlider .tabSlider-hd.line li {
    	border: 0 none;
    	color: inherit;
    }
    .tabSlider .tabSlider-hd.line li.curr {
    	background: none;
    	border-bottom: 2px solid #007aff;
    	color: #007aff;
    }
    
    .tabSlider .tabSlider-hd.slide {
    	border-radius:0;
    	display:block;
    	table-layout:auto;
    	border:none;
    	padding:0;
    	text-align:center
    }
    .tabSlider .tabSlider-hd.slide li {
    	background:#dfdfdf;
    	display:inline-block;
    	text-indent:20px;
    	height:10px;
    	width:10px;
    	overflow:hidden;
    	border-radius:100%;
    	margin:5px;
    	border:0;
    	padding:0;
    }
    .tabSlider .tabSlider-hd.slide li.curr {
    	background:#666;	
    }
    .tabSlider .tabSlider-bd {
    	position:relative;
    	min-height: 100px;
    	background:#f0f0f0;
    	width: 100%;
    	overflow: hidden;
    	transition: height 200ms ease-in-out;
    	-webkit-transition: height 200ms ease-in-out;
    }
    .tabSlider .tabSlider-bd .tabSlider-wrap {
    	position:absolute;
    	top:0; 
    	left:0;
    	width: 100%;
    	min-height: 100%;
    }
    .tabSlider .tabSlider-bd .tabSlider-wrap .tabSlider-box {
    	position:absolute;
    	top:0; 
    	left:0;
    	width: 100%;
    	min-height: 100px;
    }
    .tabSlider .tabSlider-bd .tabSlider-wrap .tabSlider-box {
    	padding:.5em	
    }
    .tabSlider .tabSlider-bd.slide {
    	background:none;
    }
    .tabSlider .tabSlider-bd.slide .tabSlider-wrap .tabSlider-box {
    	text-align:center;
    	padding:0
    }
    .tabSlider-box{
        font-size: 16px;
        line-height: 30px;
    }
    </style>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zepto1.01.js"></script>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tabslider.min.js"></script>

</head>

<body>





    <div id="wrapper">

        <div id="scroller">



            <div id="tabSlider1" class="tabSlider">

                <ul class="tabSlider-hd">

                    <li class="curr">标题1</li>

                    <li>标题2</li>

                    <li>标题3</li>

                </ul>

                <div class="tabSlider-bd">

                    <div class="tabSlider-wrap">

                        <div class="tabSlider-box curr">

                            <ul>

                                <li>text1</li>

                                <li>
                                    <div style="background:#CF0" onClick="alert(3)">text1</div>
                                </li>

                                <li>text1</li>

                                <li>text1</li>

                                <li>text1</li>

                                <li>text1</li>

                                <li>text1</li>

                                <li>text1</li>

                            </ul>

                        </div>

                        <div class="tabSlider-box">

                            <ul>

                                <li>text2</li>

                                <li><a href="http://www.51qianduan.com" style="display:block; background:#C0F; color:#fff;">text2</a></li>

                                <li>text2</li>

                                <li>text2</li>

                                <li>text2</li>

                                <li>text2</li>

                                <li>text2</li>

                                <li>text2</li>

                                <li>text1</li>

                                <li>
                                    <div style="background:#CF0" onClick="alert(3)">text1</div>
                                </li>

                                <li>text1</li>

                                <li>text1</li>

                                <li>text1</li>

                          .........完整代码请登录后点击上方下载按钮下载查看