pc選項卡js特效直接用到手機移動端就不合適了，滿足不了開發需求，下面這個手機移動端tab選項卡js特效，可滑動實用性強。一個頁面多個tab選項卡js特效不會干擾，只要把id（tabBox1）換下就行了，測試了移動端沒有兼容性問題，可以放心使用，具體看下面代碼。
效果演示地址：http://tangjiusheng.com/js/20180529.html （溫馨提示：用手機看）
代碼如下：
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
/*本例tab樣式開始*/
.tabBox {
width: 94%;
margin: 0 auto;
}
.tabBox .hd {
width: 96%;
margin: 4% auto;
overflow: hidden;
padding: 0;
}
.tabBox .hd ul {
overflow: hidden;
}
.tabBox .hd ul li {
-webkit-box-flex: 1;
float: left;
width: 21%;
padding: 2% 0 2% 0;
margin-right: 4%;
}
.tabBox .hd ul li:nth-child(4) {
margin-right: 0;
}
.tabBox .bd ul {
padding: 10px;
}
.tabBox .hd ul li.on {
width: 25%;
background: red;
text-align: center;
}
.tabBox .bd ul li {
-webkit-box-flex: 1;
font-size: 16px;
line-height: 28px;
text-align: center;
float: left;
width: 25%;
color: #fff;
display: block;
padding: 2% 0 0 0;
}
- 菜單1
- 菜單2
- 菜單3
- 菜單4
內容1
內容2
內容3
內容4
TouchSlide({slideCell:"#tabBox1",effect:"leftLoop",endFun:function(i){var bd =document.getElementById("tabBox1-bd");if(i>0)bd.parentNode.style.transition="200ms";loop:true;}});
原文地址：http://tangjiusheng.com/jsxxk/146.html
閱讀更多 湯久生前端 的文章
關鍵字: 移動 選項卡 JavaScript
