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

骑猪看日落 2022-02-27 14:42 426阅读 0赞

> 在移动端的开发中，很多时候需要用手指实现滑动切换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>