FengTab jQuery 选项卡插件 Demo

FengCMS 创始人刘峰最近学习jQuery，感觉jQuery奥妙无穷，虽然网上有无数优秀的选项卡插件，但是我还是希望能用自己的逻辑来写一个，作为练习。

结果居然写得不错，因此冒昧放到网上来给大家乐呵乐呵。

FengTab jQuery 插件，需要 jQuery 1.11.1 或者 jQuery 2.1.1 版本的 jQuery 支持，其他版本我没有测试，应该没有什么太大的问题。

首先，在网页head部分引用jQuery文件

<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>

然后引入 FengTab jQuery 插件

<script src="js/FengTab.min.js" type="text/javascript"></script>

然后创建DOM结构，如我们的示例

<div class="main">
	<ul class="tab">
		<li>标题1</li>
		<li>标题2</li>
		<li>标题3</li>
	</ul>
	<div class="con">
		<div>内容1</div>
		<div>内容2</div>
		<div>内容3</div>
	</div>
</div>
			

然后在DOM结构的下面，写入选项卡参数

<script>
$(".main").FengTab({
	titCell:".tab", 	//选项卡控制盒子
	mainCell:".con", 	//选项卡内容盒子
	defaultIndex:0, 	//默认显示第几个选项卡，第一个是0，第二个是1，以此类推
	trigger:"click", 	//切换方式，click 为点击，mouseover 为移动切换
	titOnClassName:"on", 	//选中选项卡样式
	showtime: 0		//内容切换时间，一般写200即可（单位是毫秒）
});
</script>
			

选项卡参数也可以外置到其他JS里面去，然后调用到网页中来。这是没有问题的。只是需要注意一点，如果是写到外置JS中，需要把控制代码写到闭包中去。也就是说，是等网页加载完成了再执行。

//等待网页加载完成函数
$(function(){
	//选项卡控制参数
	$(".main").FengTab({
		titCell:".tab",
		mainCell: ".con",
		defaultIndex:1,
		trigger:"click",
		titOnClassName:"on",
		showtime:0
	});
	//这里还可以写更多的选项卡控制参数
//关闭
});
			

当然，我们还需要引入CSS。

.tab {
	overflow: hidden;
	width: 498px;
	height: 32px;
	background: #ddd;
	border: 1px solid #ddd;
	cursor: pointer;
}
.tab li {
	float: left;
	width: 100px;
	text-align: center;
	line-height: 32px;
	border-right: 1px solid #fff;
}
.tab li.on {
	background: #fff;
}
.con {
	width: 480px;
	padding: 9px;
	border: 1px solid #ddd;
	border-top: none;
}
			

本CSS部分纯粹只是作为演示，大家可以根据自己的需要任意书写所需要的样式。