前军教程网

css代码：

.lprem-btn{ position: fixed; top:4rem;z-index:99999; padding: 0 1.5rem; margin: 0 0 1rem 0;white-space: nowrap; overflow-x:scroll; height:3.6rem;width:100%; box-sizing: border-box;}

.lprem-btn a{display: inline-block; height: 3rem; line-height: 3rem; margin:0 .5rem; text-align: center;border-bottom: 2px solid #fff;}

.lprem-btn a.on{border-bottom: 2px solid #0caeb0;}

html布局

<div class="lprem-btn">

<a id="lp-a-1" href="?<%=urls%>&sts=1">确认单审核中</a>

<a id="lp-a-2" href="?<%=urls%>&sts=2">来访表待填写</a>

<a id="lp-a-5" href="?<%=urls%>&sts=5">来访表已确认</a>

<a id="lp-a-7" href="?<%=urls%>&sts=7">成交单已提交</a>

<a id="lp-a-8" href="?<%=urls%>&sts=8">成交单已确认</a>

<a id="lp-a-10" href="?<%=urls%>&sts=10">成交补充已提交</a>

<a id="lp-a-11" href="?<%=urls%>&sts=11">成交补充已确认</a>

</div>

当前效果是当点击上面菜单某一项时，让点击的项目显示选中状态，同时水平滚动条滚动至当前选中的元素位置

对应的js代码：

<script>

$('#lp-a-<%=sts%>').addClass('on');

$(function(){

var oftx = 0;

for (let i = 0; i < $('.lprem-btn a').length; i++) {

var obj = $('.lprem-btn a').eq(i);

var cid=obj.attr("id");

if(cid=='lp-a-<%=sts%>'){

oftx=i*obj.outerWidth();

continue;

}

}

$('.lprem-btn').scrollLeft(oftx);

});

</script>

最后实现效果如下：