关于JavaScript插件Tab选项卡效果分享
研究了一下JavaScript插件的写法，今天就将自己写的一个小插件记录下来。 本文主要就为大家详细介绍了JavaScript插件Tab选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
本文介绍了此款插件的基本用法，实现的功能以及代码。
首先，来看看最终效果：
这是一款普通的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;
}最后将插件代码列出来，在代码里面已经写了很详细的注释：
/**
* Created by Wu.lin on 2017/11/12.
*/
(function($){
var Tab = function(tab, _params) {
var _this = this;
//保存单个Tab组件
this.tab = tab;
this.params = _params;
//默认配置参数
this.config = {
//用来定义鼠标的出发类型 "click"/mouseover
"triggerType": "mouseover",
//用来定义内容切换效果，直接切换/淡入淡出
"effect": "default",
//默认展示第几个Tab
"invoke": "1",
//用来定义Tab是否自动切换，当指定了事件间隔，就表示自动切换，并指定了切换间隔
"auto": false
};
//如果配置参数存在，就扩展默认的配置参数
if(this.params){
$.extend(this.config, this.params);
}
//保存Tab标签列表，以及对应的内容列表
this.tabItem = this.tab.find("ul.tab-nav li");
this.contentItem = this.tab.find("p.content-wrap .content-item");
//保存配置参数
var config = this.config;
if(config.triggerType === "click") {
this.tabItem.bind(config.triggerType, function() {
_this.invoke($(this));
});
} else {
this.tabItem.mouseover(function(){
_this.invoke($(this));
});
}
//自动切换功能
if(config.auto) {
this.timmer = null;
//计数器
this.loop = 0;
this.autoPlay();
this.tab.hover(function() {
window.clearInterval(_this.timmer);
}, function() {
_this.autoPlay();
});
}
//设置默认显示第几个Tab
if(config.invoke > 1) {
this.invoke(this.tabItem.eq(config.invoke - 1));
}
};
Tab.prototype = {
//事件驱动函数
invoke: function(currentTab) {
/**
* 1、执行Tab选中状态，当前选中Tab加上Active,
* 2、切换对应Tab内容，根据配置参数effect参数default|fade
*/
var index = currentTab.index();
var conItem = this.contentItem;
//Tab切换
currentTab.addClass("active").siblings().removeClass("active");
//内容区域切换
var effect = this.config.effect;
if(effect === "fade") {
conItem.eq(index).fadeIn().siblings().fadeOut();
} else {
conItem.eq(index).addClass("current").siblings().removeClass("current");
}
//注意，如果配置了自动切换，记得把当前的loop值设置为当前的Tab的index
if(this.config.auto) {
this.loop = index;
}
},
//自动间隔切换
autoPlay: function() {
var _this_ = this,
tabItems = this.tabItem, //临时保存Tab列表
tabLength = tabItems.size(),
config = this.config;
this.timmer = window.setInterval(function() {
_this_.loop++;
if(_this_.loop >= tabLength) {
_this_.loop = 0;
}
tabItems.eq(_this_.loop).trigger(config.triggerType);
}, config.auto);
}
};
Tab.init = function(tabs) {
var _this_ = this;
tabs.each(function() {
new _this_($(this));
});
// var tab = new Tab($(".js-tab").eq(0));
};
//注册成JQuery方法
$.fn.extend({
etab: function(_param) {
this.each(function () {
new Tab($(this), _param);
});
return this;
}
});
window.Tab = Tab;
})(jQuery);如此看来，是不是很简单，一起来动手试试吧！
相关推荐：
这个tab选项卡效果怎样做_html/css_WEB-ITnose
以上是关于JavaScript插件Tab选项卡效果分享的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
用户遭遇罕见故障 三星 Watch 智能手表突现白屏问题
Apr 03, 2024 am 08:13 AM
你可能遇到过智能手机屏幕出现绿色线条的问题，即使没见过，也一定在网络上看到过相关图片。那么，智能手表屏幕变白的情况你遇见过吗？4月2日，CNMO从外媒了解到，一名Reddit用户在社交平台上分享了一张图片，展示了三星Watch系列智能手表屏幕变白的情况。该用户写道："我离开时正在充电，回来时就这样了，我尝试重启，但重启过程中屏幕还是这样。"三星Watch智能手表屏幕变白这位Reddit用户并未指明这款智能手表的具体型号。不过，从图片上看，应该是三星Watch5。此前，另一位Reddit用户也报告
九州风神阿萨辛 4S 散热器评测 风冷'刺客大师”范儿
Mar 28, 2024 am 11:11 AM
说起阿萨辛ASSASSIN，相信玩家们一定会想到《刺客信条》中的各位刺客大师，不仅身手了得，而且"躬身于黑暗、服务于光明"的信条，与国内知名机箱/电源/散热器品牌九州风神（DeepCool）旗下的阿萨辛ASSASSIN系列旗舰级风冷散热器不谋而合。最近，该系列的最新产品阿萨辛ASSASSIN4S重磅上线，"西装刺客，再进阶"为高级玩家带来全新的风冷散热体验。外观一览细节满满阿萨辛4S散热器采用双塔构造+单风扇内嵌设计，外面包覆立方体造型的整流罩，整体感极强，并提供白、黑两种配色可选，满足不同色系
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
春日里的精致光影艺术，哈趣 H2 性价比之选
Apr 17, 2024 pm 05:07 PM
随着春天的到来，万物复苏，一切都充满了生机与活力。在这个美好的季节里，如何为家居生活增添一抹别样的色彩？哈趣H2投影仪，以其精致的设计和超高的性价比，成为了这个春天里不可或缺的一道亮丽风景。这款H2投影仪小巧玲珑却不失时尚。无论是放在客厅的电视柜上，还是卧室的床头柜旁，都能成为一道亮丽的风景线。它的机身采用了奶白色的磨砂质地，这种设计不仅让投影仪的外观更显高级，同时也增加了触感的舒适度。米色仿皮纹材质，更是为整体外观增添了一抹温馨与雅致。这种色彩与材质的搭配，既符合现代家居的审美趋势，又能够融入
航嘉 MX750P 全模组电源评测：750W 的白金实力浓缩
Mar 28, 2024 pm 03:20 PM
ITX平台以小巧的身形吸引了不少追求极致和独特美感的玩家，随着制程的提升和技术的进步，英特尔第14代酷睿和RTX40系显卡都可以在ITX平台中发挥实力，游戏玩家也对SFX电源有了更高的要求。游戏爱好者航嘉推出新的MX系列电源，在满足高性能需求的ITX平台中，MX750P全模组电源的定额功率高达750W，同时通过了80PLUS白金级认证。以下我们就带来这款电源的评测。航嘉MX750P全模组电源采用了简约时尚的设计理念，共有黑白两款供玩家选择，均采用磨砂表面处理，搭配银灰色和红色的字体有很好的质感，
轻松拿捏 4K 高清图像理解！这个多模态大模型自动分析网页海报内容，打工人简直不要太方便
Apr 23, 2024 am 08:04 AM
一个可以自动分析PDF、网页、海报、Excel图表内容的大模型，对于打工人来说简直不要太方便。上海AILab，香港中文大学等研究机构提出的InternLM-XComposer2-4KHD（简写为IXC2-4KHD）模型让这成为了现实。相比于其他多模态大模型不超过1500x1500的分辨率限制，该工作将多模态大模型的最大输入图像提升到超过4K（3840x1600）分辨率，并支持任意长宽比和336像素～4K动态分辨率变化。发布三天，该模型就登顶HuggingFace视觉问答模型热度榜单第一。轻松拿捏
七彩虹隐星 P15 24 评测：颜值性能兼具的硬核全能游戏本
Mar 06, 2024 pm 04:40 PM
在当下科技飞速发展的时代，笔记本电脑已经成为人们日常生活和工作中不可或缺的重要工具。对于那些对性能有高要求的玩家而言，拥有配置强大、性能出色的笔记本电脑才能满足其硬核需求。七彩虹隐星P15笔记本电脑凭借其卓越性能和令人惊艳的设计，成为了未来的引领者，堪称硬核笔记本的典范。七彩虹隐星P1524配备了13代英特尔酷睿i7处理器和RTX4060LaptopGPU，外观采用更时尚的宇宙飞船设计风格，同时在细节表现上也有出色表现。让我们先来了解一下这款笔记本的特点。至高搭载英特尔酷睿i7-13620H处理
屏幕好打游戏才够爽 iQOO Neo9S Pro+ 屏幕简析
Jul 19, 2024 pm 03:53 PM
在当今智能手机市场中，屏幕素质已经成为衡量一款手机综合性能的关键指标之一。iQOO旗下的Neo系列一直致力于为用户提供出色的游戏体验和视觉享受，最新款产品iQOONeo9SPro+更是采用一块"三好护眼电竞屏"，接下来我们就来一起看看这块屏幕的素质有多出色。iQOONeo9SPro+搭载了一块1.5KOLED电竞直屏，支持从1Hz到144Hz的旗舰级LTPO自适应刷新率，意味着在显示静态内容时能够实现超低功耗的待机状态，而在游戏过程中也能智能切换至90Hz至144Hz的动态高
