我在最开始拿到这个需求的时候，用css就实现了左右滑动，但是会自动出现滚动条，而滚动条是我不需要的，但是目前还没有找到办法将滚动条去掉，当时的实现思路是：
tab栏在手机端的时候肯定会超出屏幕，因此设置了超出部分隐藏，即:
.myTabPhone ul{ display: -webkit-box; overflow: hidden; overflow-x:auto; }
在想办法将滚动条去掉的过程中，找到了这个方法：但是这仍然不是我想要的结果；
.myTabPhone ul::-webkit-scrollbar { display: none; }
最后，看到了一篇帖子，然后做出了现在的效果：
首先看一下效果图：
手机端：可以自由左右滑动
PC
代码部分：html
<div class="introduceTab"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2 colWidth removeColwidth"> <div class="mytabs mytabTop myTabPC"> <ul id="myTab"> <li><a href="#ourStory" data-toggle="tab">111</a></li> <li><a href="#parternership" data-toggle="tab">222</a></li> <li><a href="#clientCare" data-toggle="tab">333</a></li> <li><a href="#brochures" data-toggle="tab">444</a></li> <li><a href="#pricing" data-toggle="tab">555</a></li> </ul> </div> <div class="mytabs mytabTop myTabPhone tabBox" id="tabBox1"> <div class="navhd"> <div class="hd hdi"> <ul id="myTab"> <li><a href="#ourStory" data-toggle="tab">111</a></li> <li><a href="#parternership" data-toggle="tab">222</a></li> <li><a href="#clientCare" data-toggle="tab">333</a></li> <li><a href="#brochures" data-toggle="tab">444</a></li> <li><a href="#pricing" data-toggle="tab">555</a></li> </ul> </div> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10"> <div class="tabs"> <div id="myTabContent" class="clearfix tab-content"> <div class="tab-pane fade in active sectionP" id="ourStory"> <div class="ourStorycontent"> <h5>111</h5> </div> </div> <div class="tab-pane fade" id="parternership"> <div class="ourStorycontent"> <h5>222</h5> </div> </div> <div class="tab-pane fade" id="clientCare"> <div class="ourStorycontent"> <h5>333</h5> </div> </div> <div class="tab-pane fade" id="brochures"> <div class="ourStorycontent ourStoryspecial"> <h5>444</h5> </div> </div> <div class="tab-pane fade" id="pricing"> <div class="ourStorycontent"> <h5>555</h5> </div> </div> </div> </div> </div> </div> </div> </div>
代码css
#myTab{
padding-left:0;
}
.introduceTab{
margin-top:30px;
}
.mytabs{
width:200px;
}
.colWidth{
width:195px;
}
.mytabs ul li {
list-style: none;
height: 55px;
width: 200px;
background-color: #ededed;
border-bottom:1px solid #b9b9b9;
}
.mytabs ul li a{
background: url(../images/brita/nav_separator.png) top left no-repeat;
position: relative;
z-index: 110;
height: 55px;
display: block;
float: left;
padding: 0 10px 0 10px;
line-height: 55px;
text-decoration: none;
color: #787878;
text-transform: uppercase;
}
#myTab li{
background: -webkit-linear-gradient(#ffffff, #e7e7e7); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#ffffff, #e7e7e7); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#ffffff, #e7e7e7); /* Firefox 3.6 - 15 */
background: linear-gradient(#ffffff, #e7e7e7); /* 标准的语法（必须放在最后） */
}
.myTabPhone{
display: none;
}
.tabBox .navhd {
height: 44px;
width: 100%;
position: relative;
overflow: hidden;
line-height: 44px;
-moz-box-flex: 1;
background: #eee;
border-bottom: 1px solid #ddd;
-webkit-box-flex: 1;
box-flex: 1;
}
.tabBox .hd {
position: absolute;
left: auto;
}
.tabBox .hd ul {
position: relative;
white-space: nowrap;
}
.tabBox .hd ul li {
display: inline-block;
margin-right: 10px;
}
.tabBox .hd ul li a {
display: block;
padding: 0 10px;
line-height: 40px;
font-size: 16px;
text-align: center;
border-bottom: solid 2px #eee;
color: #666;
}
.tabBox .hd ul li.on a {
color: #48a5f4 !important;
border-bottom: solid 2px #48a5f4;
}
.tabBox .con{padding:0 10px;}
.tabBox .bd li{ padding: 10px 0; border-bottom:dotted 1px #eee;}
#myTab li{
background:none;
}
.ourStorycontent{
float: left;
background-color: #fBfBfB;
background-image: url(../images/brita/gradient_spacer.png);
background-repeat: no-repeat;
background-position: center top;
width:70%;
border-right:1px solid #e3e3e3;
}
代码Js
$(function () {
//当为手机屏幕的时候，删除类colWidth
var screenWidth = document.body.clientWidth;
if (screenWidth > 320 && screenWidth < 500) {
$(".removeColwidth").removeClass("colWidth");
$(".myTabPC").css("display","none");
$(".myTabPhone").css("display","block").css("width","100%");
}
var nav_w=$(".hdi li").first().width();
$(".hdi li").on('click', function(){
nav_w=$(this).width();
$(this).addClass("on").siblings().removeClass("on");
var fn_w = ($(".navhd").width() - nav_w) / 2;
var fnl_l;
var fnl_x = parseInt($(this).position().left);
if (fnl_x <= fn_w){
fnl_l = 0;
}else if(fn_w - fnl_x <= flb_w - fl_w) {
fnl_l = flb_w - fl_w;
}else{
fnl_l = fn_w - fnl_x;
}
$(".hdi").animate({"left" : fnl_l}, 300);
});
var fl_w=$(".hdi").width();
var flb_w=$(".navhd").width();
$(".hdi").on('touchstart', function (e) {
var touch1 = e.originalEvent.targetTouches[0];
x1 = touch1.pageX;
y1 = touch1.pageY;
ty_left = parseInt($(this).css("left"));
});
$(".hdi").on('touchmove', function (e) {
var touch2 = e.originalEvent.targetTouches[0];
var x2 = touch2.pageX;
var y2 = touch2.pageY;
if(ty_left + x2 - x1>=0){
$(this).css("left", 0);
}else if(ty_left + x2 - x1<=flb_w-fl_w){
$(this).css("left", flb_w-fl_w);
}else{
$(this).css("left", ty_left + x2 - x1);
}
if(Math.abs(y2-y1)>0){
e.preventDefault();
}
});
TouchSlide( { slideCell:"#tabBox1",
endFun:function(i){
//联动切换
var as=document.getElementById("myTab").getElementsByTagName('a');
fnl_x = parseInt($(".hdi li").eq(i).position().left);
nav_w=$(".hdi li").eq(i).width();
$(".hdi li").eq(i).addClass("on").siblings().removeClass("on");
var fn_w = ($(".navhd").width() - nav_w) / 2;
var fnl_l;
if (fnl_x <= fn_w) {
fnl_l = 0;
} else if (fn_w - fnl_x <= flb_w - fl_w) {
fnl_l = flb_w - fl_w;
} else {
fnl_l = fn_w - fnl_x;
}
$(".hdi").animate({
"left" : fnl_l
}, 300);
//高度自适应
var bd = document.getElementById("tabBox1-bd");
bd.parentNode.style.height = bd.children[i].children[0].offsetHeight+"px";
if(i>0)bd.parentNode.style.transition="200ms";//添加动画效果
}
});
})需要引入
bootstrap.css;bootstrap.min.js;jquery.min.js