<!DOCTYPE html>
<html>
<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="./library/jquery-3.3.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>
<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>
<script>
$(function(){
// setTimeout(function(){
// alert("请切换手机模式")
// },1000)
$(".wx_items .item_cell").click(function(){
$(this).addClass('current').siblings().removeClass('current');
});
// var item_cell = document.getElementsByClassName('item_cell')[0];
});
</script>
</body>
</html>
网友评论