<!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>