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

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

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

HTML:

</div>

</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");
}
}

})

初始化确定TAB个数：

巴特西

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

最新文章

热门文章