jquery如何做出标签页标签点击时候控制滚动条

Question

1. 就是当我点击标签时候滚动条滚动固定到点击的那个位置

Answer 1

以下做一个参考，将导航包裹一层div，设置其宽度100%，超出x轴滚动，超出y轴隐藏，然后通过点击导航让其移动/*样式*/.scroll-nav{overflow-x:auto; overflow-y:hidden; white-space:nowrap;}/*页面*/<div class="scroll-nav">&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li class="active">壹号土猪</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>金利白猪</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>五谷草猪</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>壹号土猪</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>壹号土猪</li>&nbsp; &nbsp; </ul></div>/*js*/初始时计算导航li的宽度，给ul赋值$(function(){&nbsp; &nbsp; var liLen = $(".scroll_nav li").outerWidth();&nbsp; &nbsp; var liCount = $(".scroll_nav ul").children().length;&nbsp; &nbsp; $(".scroll_nav ul").css("width",(liLen*liCount)+'px');&nbsp; &nbsp; // 点击导航&nbsp; &nbsp; $(".scroll_nav li").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; //移动导航&nbsp; &nbsp; &nbsp; &nbsp; $(this).addClass("active").siblings().removeClass("active");&nbsp; &nbsp; &nbsp; &nbsp; var index = $(this).index();&nbsp; &nbsp; &nbsp; &nbsp; var liW = $(this).width();&nbsp; &nbsp; &nbsp; &nbsp; $('.scroll_nav').stop().animate({scrollLeft:index*liW},300);&nbsp; &nbsp; });})