关于tab页实现浏览器标签页的设计

我们使用的是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;
						//超出盒子右边的长度为rest
						var 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;
		                    })
		                }

		            }
		        }
			
		}