返回顶部

amazeUI——tab禁止左右滑动（触控操作）

参考：http://amazeui.clouddeep.cn/javascript/tabs/

 

效果：

 

html:

<!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>amazeUI tab</title>
        <link rel="stylesheet" href="css/amazeui.css">
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/amazeui.min.js"></script>

    </head>
    <body>
        <div class="am-tabs" data-am-tabs="{noSwipe: 1}" id="doc-my-tabs">  //关键 noSwiper:1
            <ul class="am-tabs-nav am-nav am-nav-tabs">
                <li class="am-active"><a href="">tab1</a></li>
                <li><a href="">tab2</a></li>
                <li><a href="">tab3</a></li>
            </ul>

            <div class="am-tabs-bd">
                <div class="am-tab-panel am-active">
                    <p>选项卡1内容</p>
                </div>
                <div class="am-tab-panel">
                    <p>选项卡2内容</p>
                    <p>选项卡2内容</p>
                </div>
                <div class="am-tab-panel">
                    <p>选项卡3内容</p>
                    <p>选项卡3内容</p>
                    <p>选项卡3内容</p>
                </div>
            </div>
        </div>
        <script>
            $(function() {
                $('#doc-my-tabs').tabs(); //关键
            })
        </script>
    </body>
</html>
posted @ 2019-09-30 16:53  前端-xyq  阅读(1144)  评论(0)    收藏  举报