溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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>
<div 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>
<div class="content-wrap">
<div class="content-item current">
<h4>新聞</h4>
</div>
<div class="content-item">
<h4>電影</h4>
</div>
<div class="content-item">
<h4>娛樂</h4>
</div>
<div class="content-item">
<h4>科技</h4>
</div>
</div>
</div>
<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("div.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);關于“JavaScript插件如何實現Tab選項卡效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
