选项卡切换


常规用法
鼠标移动切换  >
  • 周一更新
  • 周二更新
  • 周三更新
  • 周四更新
  • 周五更新
  • 周六更新
  • 周日更新
  • 动漫排行
星期一
星期二
星期三
星期四
星期五
星期六
星期天
代码
<!--全部主体内容-->
<div class="list-content">
	<!--块元素-->
	<div class="block">
		<!--正文内容-->
		<div class="main">
			<!--选项卡切换-->
			<div id="tab" class="tab">
				<!--选项卡标题部分-->
				<div class="tab-title">
					<!--可以为选项卡添加图标、大标题、链接-->
					<img class="mod-icon" src="http://upload.javaex.cn/dm.png" />
					<em><a href="#" target="_blank">鼠标移动切换  <i style="color:#ccc">></i></a></em>
					<ul>
						<li>周一更新</li>
						<li>周二更新</li>
						<li>周三更新</li>
						<li>周四更新</li>
						<li>周五更新</li>
						<li>周六更新</li>
						<li>周日更新</li>
						<!--可以为选项卡右上角添加链接-->
						<a class="more" href="#" target="_blank">动漫排行</a>
						<span class="clearfix"></span>
					</ul>
				</div>
				<!--选项卡内容部分-->
				<div class="tab-content">
					<div>星期一</div>
					<div>星期二</div>
					<div>星期三</div>
					<div>星期四</div>
					<div>星期五</div>
					<div>星期六</div>
					<div>星期天</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	javaex.tab({
		id : "tab",		// tab的id
		current : 1,	// 默认选中第几个选项卡
		mode : "mouseover",	// 鼠标移动切换选项卡
		// 切换选项卡后返回一个对象,包含选项卡的索引,从1开始计
		// 初始化会自动执行一次
		callback: function (rtn) {
			console.log(rtn.index);
		}
	});
</script>

参数说明(使用属性默认值时,可以缺省该属性)
序号 属性名 默认值 说明
1 id 选项卡id
2 current 1 默认显示第几个标签,从1开始计
3 mode mouseover 切换模式。mouseover:鼠标移动切换; click: 鼠标点击切换
4 isInit false 是否初始化就自动调用回调函数
5 callback 返回的对象中包含了选项卡的索引,从1开始计
6 display block div的display属性。常用的是block和flex,根据实际需要填写
7 delay 200 鼠标移动切换时,延迟多少毫秒

纯导航用法(追加class="tab-nav-top")
  • 周一更新
  • 周二更新
  • 周三更新
  • 周四更新
  • 周五更新
  • 周六更新
  • 周日更新
星期一
星期二
星期三
星期四
星期五
星期六
星期天
或(追加class="tab-nav-bottom")
  • 周一更新
  • 周二更新
  • 周三更新
  • 周四更新
  • 周五更新
  • 周六更新
  • 周日更新
星期一
星期二
星期三
星期四
星期五
星期六
星期天
代码
<!--块元素-->
<div class="block">
	<!--正文内容-->
	<div class="main-0">
		<!--选项卡切换-->
		<div id="tab2" class="tab tab-nav-top">
			<!--选项卡标题部分-->
			<div class="tab-title">
				<ul class="clear">
					<li>周一更新</li>
					<li>周二更新</li>
					<li>周三更新</li>
					<li>周四更新</li>
					<li>周五更新</li>
					<li>周六更新</li>
					<li>周日更新</li>
				</ul>
			</div>
			<!--选项卡内容部分-->
			<div class="tab-content">
				<div>星期一</div>
				<div>星期二</div>
				<div>星期三</div>
				<div>星期四</div>
				<div>星期五</div>
				<div>星期六</div>
				<div>星期天</div>
			</div>
		</div>
	</div>
</div>

<script>
	javaex.tab({
		id : "tab2",		// tab的id
		current : 1,		// 默认选中第几个选项卡
		mode : "click",		// 鼠标点击切换选项卡
		// 切换选项卡后返回一个对象,包含选项卡的索引,从1开始计
		callback: function (rtn) {
			console.log(rtn.index);
		}
	});
</script>