Tabs滑动选项卡插件 mt-tabpage.js
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文分享如何使用mt-tabpage.js制作Tabs滑动选项卡效果，支持点击切换和浏览切换，支持自动切换.

js调用

<script src="jquery.min.js"></script>  
<script src="mt-tabpage.js"></script>

html代码

<div class="mt-tabpage" js-tab="1">
        <div class="mt-tabpage-title">
            <a href="javascript:;" class="mt-tabpage-item mt-tabpage-item-cur">
                <h4>
                    站长推荐1</h4>
            </a><a href="javascript:;" class="mt-tabpage-item">
                <h4>
                    站长推荐2</h4>
            </a><a href="javascript:;" class="mt-tabpage-item">
                <h4>
                    站长推荐3</h4>
            </a>
        </div>
        <div class="mt-tabpage-count">
            <ul class="mt-tabpage-cont__wrap">
                <li class="mt-tabpage-item">
                    <p>
                        HUAWEI P40 Pro 5G
                    </p>
                    <p>
                        HUAWEI Mate 30 5G</p>
                </li>
                <li class="mt-tabpage-item">
                    <p>
                        HUAWEI Pro 5G</p>
                    <p>
                        华为畅享Z 5G</p>
                </li>
                <li class="mt-tabpage-item">
                    <p>
                        HUAWEI P40 Pro+ 5G</p>
                    <p>
                        HUAWEI nova 7 5G
                    </p>
                </li>
            </ul>
        </div>
    </div>

mt-tabpage初始化

<script type="text/javascript">
    $(function () {

        $('[js-tab=1]').tab({
            mouse: 'click',
            curDisplay: 1,
            changeMethod: 'horizontal'
        }); 

    });
    </script>