By M.JM.Tabs 选项卡切换

更新说明

=== V1.0.2 ===
* 修正Tab-nav 中 a 标签 获取 class 名的问题，
* 增加默认显示第几个Tab选项卡，请看下面Demo中演示

=== V1.0.1 ===
* 修正获取内容元素子元素节点不正确Bug。
* 修正获取默认参数的问题。

Mouseover 触发事件

内容1

内容1

内容1

内容2

内容2

内容2

内容3

内容3

内容3

Click 触发事件

内容1

内容1

内容1

内容2

内容2

内容2

内容3

内容3

内容3

默认让第二个Tab选项卡显示 (可以刷新在次查看 如何设置，请看下方)

内容1

内容1

内容1

内容2

内容2

内容2

内容3

内容3

内容3

设置默认第几个Tab显示方法

<div class="tabs-nav" id="tabs-nav">
	<ul class="clearfix">
		<li><a href="javascript:;" class="xxxx">文字好长哦1</a></li>
		<li><a href="javascript:;" class="xxxx current">切换2</a></li>
		<li><a href="javascript:;" class="xxxx">切换3</a></li>
	</ul>
</div>

PS:只要在将要显示的Tab-Nav 的 a 标签内引用 默认Tab-Nav 选中的样式名即可，比如你默认是 select 则样式引用 select。最后效果就是这样的 class="list-2 select"。这样默认第二个就会显示。如有不懂，请在底下留言。如果都没有设置，程序将设置第一个为显示

M.Tabs 该如何使用呢？

头部引用JS文件 (不需要任何JS库，直接引用即可)

<head>
	<script type="text/javascript" src="M.Tabs.min.js"></script>
</head>

初始化HTML (结构必须为这样 大家直接Copy吧)

<div class="tabs-nav" id="tabs-nav">
	<ul class="clearfix">
		<li><a href="javascript:;">文字好长哦1</a></li>
		<li><a href="javascript:;">切换2</a></li>
		<li><a href="javascript:;">切换3</a></li>
	</ul>
</div>
<div class="tabs-content" id="tabs-content">
	<div>
		<!--这里面填写内容，随便什么结构-->
	</div>
	<div>
		<!--这里面填写内容，随便什么结构-->
	</div>
	<div>
		<!--这里面填写内容，随便什么结构-->
	</div>
</div>

PS：如一个页面多个Tab切换，则每个Tab对应的ID要选择改变，不能重复，默认插件自动添加 current 样式 和 将第一块DIV内容显示。为了用户体验效果更好或者JS默认没有加载完的情况下，会使所有Tab都会显示，所以我们可以将默认第一块的引用Class名 如下


<div class="tabs-nav" id="tabs-nav">
	<!--选项卡导航 给第一个a添加样式-->
	<ul class="clearfix">
		<li><a href="javascript:;" class="current">文字好长哦1</a></li>
		<li><a href="javascript:;">切换2</a></li>
		<li><a href="javascript:;">切换3</a></li>
	</ul>
</div>
<div class="tabs-content" id="tabs-content">
	<!--第一个内容的DIV添加一个样式-->
	<div class="current">
		<!--这里面填写内容，随便什么结构-->
	</div>
	.......
</div>

初始化CSS (自己随便定义CSS)

.tabs {  margin:0px 0px 20px; }
.tabs .tabs-nav { height:35px; border-bottom:1px solid #ccc; }
.tabs .tabs-nav ul li { 
	display:inline; 
	float:left; 
	font-size:14px;
	margin-right:10px; 
}
.tabs .tabs-nav ul li a { 
	transition:color 500ms linear; 
	float:left; 
	height:34px; 
	line-height:34px; 
	text-decoration:none; 
	display:block; zoom:1; 
	padding:0px 10px; 
	color:#000; 
	border-radius:5px 5px 0px 0px; 
	border:1px solid #ccc; 
	_height:35px; _border-bottom:none; 
}
.tabs .tabs-nav ul li a:hover, .tabs .tabs-nav ul li a.current { 
	color:#069; 
	border-bottom:1px solid #FFF; 
	_border-bottom:none; 
} 
.tabs .tabs-content { padding:5px; border:1px solid #ccc; border-top:none; }
.tabs .tabs-content div { display:none; }
.tabs .tabs-content div.current { display:block; }
.tabs .tabs-content p { line-height:180%; }

初始化JS

<script type="text/javascript">
	//Demo：第一个选项卡
	new MTabs({
		nav : 'tabs-nav',	
		content : 'tabs-content',
		currentClassName : 'current',
		eventType : 'mouseover'
	});
	
	//Demo：第二个选项卡
	new MTabs({
		nav : 'tabs-nav-1',
		content : 'tabs-content-1',
		currentClassName : 'current',
		eventType : 'click'
	});
<script>

JS参数说明

nav: 默认选项卡导航的ID，必填
content: 默认选项卡内容的ID，必填
currentClassName: 默认选项卡导航选中的样式名，可以不填，默认值：current
eventType: 选项卡触发的事件，提供两种触发事件 click，mouseover，可以不填，默认为 mouseover
下载 M.Tabs.zip