选项卡切换


水平代码
<!--选项卡切换-->
<!--选项卡标题部分-->
<div id="tab" class="tab-title">
	<ul>
		<li>周一更新</li>
		<li>周二更新</li>
		<li>周三更新</li>
	</ul>
</div>
<!--选项卡内容部分-->
<div class="tab-content">
	<div>星期一</div>
	<div>星期二</div>
	<div>星期三</div>
</div>

<script>
	javaex.tab({
		id : "tab",	// tab的id
		// 切换选项卡后返回一个对象,包含选项卡的索引,从1开始计
		callback: function (rtn) {
			console.log(rtn.index);
		}
	});
</script>
垂直代码
<div class="tab-container">
	<div id="tab2" class="tab-bar">
		<ul>
			<li>选项1</li>
			<li>选项2</li>
		</ul>
	</div>
	
	<div class="tab-content-container">
		<div class="tab-content">
			<div>
				111111111111111
			</div>
			<div>
				22222222222222
			</div>
		</div>
	</div>
</div>

<script>
	javaex.tab({
		id : "tab2",	// tab的id
		type : "vertical",
		callback: function (rtn) {
			console.log(rtn.index);
		}
	});
</script>
参数说明(使用属性默认值时,可以缺省该属性)
序号 属性名 默认值 说明
1 id 选项卡id
2 current 1 默认选中第几个标签,从1开始计
3 isInit false 是否初始化就自动调用回调函数
4 type level 水平:level;垂直:vertical
5 hasUnderline true 选中项是否含有下划线
6 callback 返回的对象中包含了选项卡的索引,从1开始计
水平演示
垂直演示