tab，tabCon里放很多div，点击左右滑动一个。可根据初始化清除空的tabCon。

效果如上，左右箭头点击，相应左右滑动一个功能菜单的长度，点击BTN2时若所有功能菜单没溢出就不显示箭头不允许左右滑动。

可根据初始化功能菜单的个数，判断。若某个tabCon没有内容，则删除相应tabCon和tabBtn。

HTML:

<div class="tabBtn">
<div class="btn1 Tbtn" id="OnTBtn">btn1</div>
<div class="btn2 Tbtn">btn2</div>
<div class="btn3 Tbtn">btn3</div>
<div class="btn4 Tbtn">btn4</div>
<div class="btn5 Tbtn">btn5</div>

</div>

<div class="tabCon">

<div class="tab1 tab" id="OnTCon">
<i class="leftArrow"></i>
<div>

<ul>

<li class="fun-menu">
<i></i>
<span>功能菜单1</span>
</li>
<li class="fun-menu">
<i></i>
<span>功能菜单2</span>
</li>
<li class="fun-menu">
<i></i>
<span>功能菜单3</span>
</li>

</ul>

</div>
<i class="rightArrow"></i>
</div>

.....类推5个。

CSS：

.tabBtn{
/* width: 300px;
height: 42px;
display: inline-block;
position: absolute;
right: 40px;
bottom: 15px;*/
width: 360px;
height: 32px;
display: inline-block;
position: absolute;
right: 40px;
bottom: 0;
}
.tabBtn div{
/*width: 58px;
height: 40px;*/
width: 70px;
height: 32px;
background: #E28920;
float: left;
border: 1px solid #8D8D8D;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
text-align: center;
/* line-height: 42px;*/
line-height: 32px;
}
#OnTBtn{
background: #E2573E;
}
/*tap内容*/
.tabCon{
width: 100%;
height: 50px;
background:#d8cbcb;
/*position: relative;*/
}
.tab{
width: 100%;
height: 50px;
float: left;
text-align: left;
line-height: 50px;
position: absolute;
display: none;
box-sizing: border-box;

}
#OnTCon{
display: block;
}
.tab>div{
height: 50px;
overflow: hidden;
margin: 0 30px;
position: relative;
}
.tab ul{
position: absolute;
}
.fun-menu{
width: 104px;
height: 34px;
background: #F4F5F9;
float: left;
margin: 7px 6px 7px 0;
line-height: 34px;
box-sizing: border-box;
display: inline-block;

}
.fun-menu i{
width: 28px;
height: 28px;
display: inline-block;
margin-right: 3px;
margin-left: 6px;
margin-top: 3px;
float: left;
background: #8A2BE2;

}
.fun-menu span{
width: 65px;
height: 34px;
line-height: 34px;
display: inline-block;
float: left;
}
.leftArrow,.rightArrow{
width: 30px;
height: 30px;
display: inline-block;
position: absolute;


}
.leftArrow{
background: url(../img/leftArrow.png) no-repeat;
background-size: 100% 100%;
top: 7px;
display: none;
}
.rightArrow{
right: 0;
top: 10px;
background: url(../img/rightArrow.png) no-repeat;
background-size: 100% 100%;
display: none;
}

JS：

$(document).ready(function() {
var click_num =[0,0,0,0,0,0];
var curIndex=0;
var li_size=0;
var w_width = $(window).width();
var screenSize = Math.floor((w_width - 60) / 110);
$(".Tbtn").each(function(index) {
var Tbtn = $(this);
$(this).click(function() {

$("#OnTCon").removeAttr("id");
$("#OnTBtn").removeAttr("id");

$(".tab").eq(index).attr("id", "OnTCon");
Tbtn.attr("id", "OnTBtn");
curIndex=index;
tbnOnclick();
});

});
tbnOnclick();
function tbnOnclick(){
li_size = $("#OnTCon ul li").size();
$("#OnTCon ul").width(li_size * 110);

if(li_size - screenSize>0){
$(".leftArrow").css("display","block");
$(".rightArrow").css("display","block");
// $(".leftArrow").css("background","url(image/top/left-A.png) no-repeat");
// $(".rightArrow").css("background","url(image/top/right-A.png) no-repeat");
}else{
/* $(".leftArrow").css("background","url(image/top/left-B.png) no-repeat");
$(".rightArrow").css("background","url(image/top/right-B.png) no-repeat");*/
$(".leftArrow").css("display","none");
$(".rightArrow").css("display","none");
}
}

var lCanClick=true;
var rCanClick=true;
$(".rightArrow").click(function() {
if(rCanClick==false) return;
console.log(click_num[curIndex]);
if(click_num[curIndex] < li_size - screenSize) {
click_num[curIndex]++;
rCanClick=false;
$("#OnTCon ul").animate({
left: -click_num[curIndex] * 110
}, 500,function(){
rCanClick=true;
});
}else{
click_num[curIndex]=li_size - screenSize;

}
});

$(".leftArrow").click(function() {
if(lCanClick==false) return;
console.log(click_num[curIndex]);
var leftPosition = $("#OnTCon ul").css("left");
leftPosition = leftPosition.replace("px", "");
if(parseInt(leftPosition) < 0) {
click_num[curIndex]--;
lCanClick=false;
$("#OnTCon ul").animate({
left: -click_num[curIndex] * 110
}, 500,function(){
lCanClick=true;
});
}else{
click_num[curIndex]=0;
}
});

})

 

初始化确定TAB个数：