本文介绍了此款插件的基本用法，实现的功能以及代码。
首先，来看看最终效果：
这是一款普通的Tab选项卡插件，下面来讲讲它实现了哪些功能：
1、支持不同鼠标事件触发选项卡切换效果；
2、支持不同切换效果的配置，例如淡入淡出/直接切换；
3、支持默认展示第几个选项卡的配置；
4、支持选项卡的自动切换效果。
例子很简单，需要用到的知识包括：
1、html、css的基础知识；
2、对this，prototype，new等关键词的理解。
简而言之，就是通过参数配置的形式来完成不同效果的展示。
下面先看一看如何使用：
1、$(".js-tab").etab();
2、$(".js-tab").etab({
triggerType: "click",
effect: "fade",
invoke: 2,
auto: 3000
});
3、Tab.init($(".js-tab"));
本插件支持几种不同的初始化方式，代码很简单，类似于BootStrap插件的使用方法。下面奉上完整的代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab选项卡</title>
<link href="tab.css" rel="stylesheet">
<style>
* {
margin:0;
padding:0;
}
body {
background-color: #323232;
font-size:12px;
font-family:微软雅黑;
padding:100px;
}
ul, li {
list-style-type: none;
}
</style>
<script src="../lib/jquery-1.11.3.js"></script>
<script type="text/javascript" src="tab.js"></script>
</head>
<body>
<p class="js-tab tab">
<ul class="tab-nav">
<li class="active"><a href="#">新闻</a> </li>
<li><a href="#">电影</a> </li>
<li><a href="#">娱乐</a> </li>
<li><a href="#">科技</a> </li>
</ul>
<p class="content-wrap">
<p class="content-item current">
<h3>新闻</h3>
</p>
<p class="content-item">
<h3>电影</h3>
</p>
<p class="content-item">
<h3>娱乐</h3>
</p>
<p class="content-item">
<h3>科技</h3>
</p>
</p>
</p>
<script>
$(function() {
// Tab.init($(".js-tab"));
$(".js-tab").etab({
triggerType: "click",
effect: "fade",
invoke: 2,
auto: 3000
});
$(".js-tab").etab();
});
</script>
</body>
</html>.tab {
width: 300px;
}
.tab .tab-nav {
height: 30px;
}
.tab .tab-nav li {
float: left;
margin-right:5px;
background-color:#767676;
border-radius:3px 3px 0 0;
}
.tab .tab-nav li a{
display:block;
height:30px;
padding:0 20px;
color: white;
line-height:30px;
text-decoration: none;
}
.tab .tab-nav .active {
background-color: #fff;
}
.tab .tab-nav .active a{
color: #777;
}
.tab .content-wrap{
background-color: white;
padding:5px;
height:200px
}
.tab .content-wrap .content-item {
position:absolute;
height: 200px;
display: none;
}
.tab .content-wrap .current {
height: 200px;
display: block;
}最后将插件代码列出来，在代码里面已经写了很详细的注释：
如此看来，是不是很简单，一起来动手试试吧！
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
