手机移动端可滚动导航代码
<!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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· .NET 8.0 + Linux 香橙派,实现高效的 IoT 数据采集与控制解决方案
· .NET中 泛型 + 依赖注入 的实现与应用