Html
    Css
    Js

    
                        
ul,li {
	list-style:none;
	flex:1;
	text-align:center;
	cursor:pointer;
	padding:5px 0;
}
ul {
	display:flex;
	margin:0;
	padding:0;
}
.div {
	width:100%;
	overflow:hidden;
	background-color:#80b600;
}
.active {
	background-color:#80b600;
	color:#ffffff;
}
#tabClick {
	background-color:#f5f5f5;
	color:#80b600;
}
#content>div {
	display:none;
	height:200px;
}
#tabClick1 {
	background-color:#f5f5f5;
	color:#80b600;
}
#content1>div {
	display:none;
	height:200px;
}
#tabClick2 {
	background-color:#f5f5f5;
	color:#80b600;
}
#content2>div {
	display:none;
	height:200px;
}
#tabClick3 {
	background-color:#f5f5f5;
	color:#80b600;
}
#content3>div {
	display:none;
	height:200px;
}
/* ------------ */
		.box {
	display:flex;
	justify-content:center;
}
h2 {
	text-align:center;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

原生JS选项卡(优化版原创)

更新时间:2021-04-20 00:47:28

/**
* @overview
* 选项卡功能包括 
*         1.tabbar切换
*         2.默认展示具体第几项
*         3.上拉底部加载更多事件回调触发
*         4.切换选项卡过渡动画设置
* 设置参数
* @param title :[string,string]/[{name:'value'}] 设置tab切换按钮标题
*           content :string 切换内容父级容器id节点名称
*           defaultindex :number 默认选中第几项
*           titleevent :eventhandle 点击选项卡事件回调
*           transition :boolean 是否开启切换过度动画,默认0.3s
*           handlescroll :eventhandle 当前容器上拉滚动条到底部监听
*           transitiontime :number 设置过渡动画时间
*automatic:{//设置自动切换 
    open:true,//打开自动切换,默认时间
    time:1000//自定义时间
}
*/
0