HTML实现的Tab切换效果，点击滑动和触控滑动（SlideTouch插件）

在移动端的开发中，很多时候需要用手指实现滑动切换Tab的效果，相比于点击的体验效果更好，本文就在SlideTouch这个插件中提取了一个比较好的效果。可以使用Chrome直接测试。
实现代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>TouchSlide测试</title>
</head>
<body>
<script src="TouchSlide.js"></script>
<style type="text/css">
    /* css 重置 */
    body, p, input, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form {
        margin: 0;
        padding: 0;
        list-style: none;
        vertical-align: middle;
        font-weight: normal;
    }

    img {
        border: 0;
        margin: 0;
        padding: 0;
    }

    body {
        color: #000;
        -webkit-user-select: none;
        -webkit-text-size-adjust: none;
        font: normal 16px/200% "微软雅黑", helvetica, arial;
        text-align: left;
    }

    a {
        text-decoration: none;
        color: #000;
    }

    /* 效果导航 */
    .effectNav {
        margin-top: 10px;
        border-top: 1px solid #666;
        background: #999;
        padding-bottom: 10px;
    }

    .effectNav h3 {
        padding: 0 10px;
        background: #ddd;
        background: #333;
        color: #fff;
    }

    .effectNav ul {
        font-size: 0;
    }

    .effectNav li {
        display: inline-block;
        font-size: 12px;
        padding: 0 10px;
        margin: 10px 0 0 10px;
        background: #cdcdcd;
    }

    .effectNav li.new {
        background: #fce8cd;
    }

    /* 本例子css -------------------------------------- */
    .tabBox .hd {
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        font-size: 20px;
        background: #F3F3F3;
        border-top: 2px solid #CECECE;
    }

    .tabBox .hd ul {
        overflow: hidden;
    }

    .tabBox .hd ul li {
        float: left;
        margin: 0 10px;
        color: #515151;
    }

    .tabBox .hd ul .on {
        border-bottom: 2px solid #BA2636;
        color: #BA2636;
    }

    .tabBox .hd ul .on a {
        display: block; /* 修复Android 4.0.x 默认浏览器当前样色无效果bug */
    }

    .tabBox .bd ul {
        padding: 10px 0 10px 10px;
    }

    .tabBox .bd li {
        height: 33px;
        line-height: 33px;
    }

    .tabBox .bd a {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    /* 去掉链接触摸高亮 */
    .tabBox .bd li a {
        color: #555;
    }

    .tabBox .bd .t {
        height: 85px;
        overflow: hidden;
    }

    .tabBox .bd .t .pic {
        width: 130px;
        float: left;
    }

    .tabBox .bd .t .con {
        margin-left: 130px;
        line-height: 20px;
    }

    .tabBox .bd .t .con p {
        font-size: 12px;
        color: #999;
    }
</style>
<div id="content">
    <div id="leftTabBox" class="tabBox">
        <div class="hd">
            <ul>
                <li><a href="#">财经</a></li>
                <li><a href="#">股票</a></li>
                <li><a href="#">商业</a></li>
                <li><a href="#">房产</a></li>
            </ul>
        </div>
        <div class="bd">
            <ul>
                <li><a href="#">slide1</a></li>
                <li><a href="#">slide2</a></li>
            </ul>
            <ul>
                <li><a href="#">slide3</a></li>
                <li><a href="#">slide4</a></li>
            </ul>
            <ul>
                <li><a href="#">slide5</a></li>
                <li><a href="#">slide6</a></li>
                <li><a href="#">slide7</a></li>
            </ul>
            <ul>
                <li><a href="#">slide8</a></li>
                <li><a href="#">slide9</a></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">TouchSlide({slideCell: "#leftTabBox"});</script>
</div>
</body>
</html>
posted on 2020-05-19 17:26 黑夜开发者阅读(143) 评论(0) 编辑收藏举报