手机移动端可滚动导航代码

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>手机移动端可滚动的导航代码</title>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <style type="text/css">
        /*滚动水平导航栏 start*/
        .lr_nb{border-bottom:1px solid #E8E8E8;border-top:1px solid #E8E8E8;height:40px;line-height:40px;width:100%;position:absolute;background:#fff;padding: 0px 10px;box-sizing:border-box;z-index:1;max-width:1080px;opacity:1;top:0;-webkit-transition:.3s all;transition:.3s all}
        .lr_nb .slider_wrap.line{overflow:hidden;overflow-x:scroll;width:100%;-webkit-overflow-scrolling:touch;}
        .lr_nb .slider_wrap.line .item_cell{display:inline-block;margin: 0px 10px;;overflow:hidden;position:relative;}
        .lr_nb .slider_wrap.box{overflow:hidden;width:100%}
        .lr_nb .slider_wrap::-webkit-scrollbar{display:none}
        .lr_nb .wx_items{white-space:nowrap}
        .lr_nb .wx_items span{color:#666;font-size: 15px; white-space:nowrap;display:block;-webkit-tap-highlight-color:rgba(0,0,0,0);text-align:center;cursor:pointer}
        .lr_nb .wx_items .current span,.lr_nb .wx_items .current a:visited,.lr_nb .wx_items .current a:link,.lr_nb .wx_items .current a:hover,.lr_nb .wx_items .current a:focus{color:#4fbeab;}
        .lr_nb_after{height:40px;display:block;clear:both;}
        /*滚动水平导航栏 end*/
    </style>
</head>
<body>
    <!--滚动水平导航栏 start-->
    <div class="lr_nb">
        <div class="slider_wrap line">
            <div class="wx_items">
                <div class="item_cell current">
                    <span>类型一</span>
                </div>
                <div class="item_cell">
                    <span>类型二</span>
                </div>
                <div class="item_cell">
                    <span>类型三</span>
                </div>
                <div class="item_cell">
                    <span>类型四</span>
                </div>
                <div class="item_cell">
                    <span>类型五</span>
                </div>
                <div class="item_cell">
                    <span>类型六</span>
                </div>
                <div class="item_cell">
                    <span>类型七</span>
                </div>
                <div class="item_cell">
                    <span>类型八</span>
                </div>
            </div>
            </div>
    </div>
    <div class="lr_nb_after"></div>
    <!--滚动水平导航栏 end-->
    <script>
        $(function(){
            $(".wx_items .item_cell").click(function(){
                $(this).addClass('current').siblings().removeClass('current');
            });
        });
    </script>
</body>
</html>


<body>
</body>
</html>
复制代码

 

posted @   Tane  阅读(597)  评论(0编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· .NET 8.0 + Linux 香橙派,实现高效的 IoT 数据采集与控制解决方案
· .NET中 泛型 + 依赖注入 的实现与应用
点击右上角即可分享
微信分享提示