我们使用的是Bootstrap的插件实现tab页 链接：http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-tab
效果如下图：
实现效果图后的：
设计思想：给浏览器最外层div 定长 等于浏览器的长度，div内部的div以
$('#categoryShow').css('left',leftt+parseFloat($('#categoryShow').css('left')));方式去移动，不论左移还是右移，我们都以左边为基准，实现tab页的移动//添加tab页并显示最新添加的function addTab(){var tab_All=($(".wrap").width())*0.9;var tab_One=tab_All/10; //判断长度是否大于显示长度 if((tab_One * ($('#categoryShow').children().length)+parseFloat($('#categoryShow').css('left'))-tab_All)>0){ //获取盒子右边剩余的长度 var leftt=-(tab_One * ($('#categoryShow').children().length)+parseFloat($('#categoryShow').css('left'))-tab_All); //将盒子添加到最左边 $('#categoryShow').css('left',leftt+parseFloat($('#categoryShow').css('left'))); }}/* * tab页移动 */this.toLeft = function(){var tab_All=($(".wrap").width())*0.9;var tab_One=tab_All/10; if(tabFlag){//如果右边有盒子 if((tab_One * ($('#categoryShow').children().length)+parseFloat($('#categoryShow').css('left'))) > tab_All){ tabFlag=false;//超出盒子右边的长度为restvar rest=(tab_One * ($('#categoryShow').children().length)+parseFloat($('#categoryShow').css('left'))-tab_All);//如果右边盒子的长度大于显示长度 if(rest - tab_All>0){ //移动一个盒子的长度 $('#categoryShow').animate( {left:parseFloat($('#categoryShow').css('left'))-(tab_All)} //不论左移还是右移，定位都以parseInt($('.cont').css('left'))+多少或减多少 ,function () { tabFlag=true; }) }else { //移动剩余的长度 $('#categoryShow').animate( {left: parseFloat($('#categoryShow').css('left'))-rest} //不论左移还是右移，定位都以parseInt($('.cont').css('left'))+多少或减多少 ,function () { tabFlag=true; }) } } }}this.toRight = function(){var tab_All=($(".wrap").width())*0.9;var tab_One=tab_All/10;if(tabFlag){ //判断左侧长度大小是否小于一个盒子长度 if(parseFloat($('#categoryShow').css('left'))<0){ tabFlag=false; if(parseFloat($('#categoryShow').css('left')) < (-tab_All)){ $('#categoryShow').animate({left:parseFloat($('#categoryShow').css('left'))+(tab_All)} //不论左移还是右移，定位都以parseInt($('.cont').css('left'))+多少或减多少,function () {tabFlag=true; }) }else { //不论左移还是右移，定位都以parseInt($('.cont').css('left'))+多少或减多少 $('#categoryShow').animate({left:parseFloat($('#categoryShow').css('left'))-parseFloat($('#categoryShow').css('left'))} ,function () {tabFlag=true; }) } } }}