使用 jQuery 封装一个简单地选项卡效果插件
2018-11-13 本文已影响0人
e20a12f8855d
使用 jQuery 封装一个简单地选项卡效果插件
这个插件我决定实现两种选项卡效果，一种是鼠标点击切换，另一种是鼠标移入切换，移入切换这种方式可以给切换导航添加链接地址。
首先在插件函数中传一个参数 tabStyle，判断在调用时传入的 tabStyle 是什么，如果没有传入参数，执行鼠标点击切换效果，如果传入 mouseover，则执行鼠标移入切换效果。
为了方便选项卡效果的复用，我决定在 $.fn.LkTabs.defaults{} 中不设置默认参数，通过 this 来获取当前 DOM 范围内的元素。
下边是效果图
效果预览.png
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.tabs_tit .active { color: red }
.tcon_li { display: none; }
</style>
<body>
<h3>点击切换</h3>
<div class="tabs_box1">
<div class="tabs_tit">
<a href="" class="active">栏目一</a>
<a href="">栏目二</a>
<a href="">栏目三</a>
</div>
<div class="tabs_con">
<div class="tcon_li" style="display: block;">栏目一内容</div>
<div class="tcon_li">栏目二内容</div>
<div class="tcon_li">栏目三内容</div>
</div>
</div>
<h3>移入切换</h3>
<div class="tabs_box2">
<div class="tabs_tit">
<a href="" class="active">栏目一</a>
<a href="">栏目二</a>
<a href="">栏目三</a>
</div>
<div class="tabs_con">
<div class="tcon_li" style="display: block;">栏目一内容</div>
<div class="tcon_li">栏目二内容</div>
<div class="tcon_li">栏目三内容</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery_LkTabs.js"></script>
<script>
$(function() {
$(".tabs_box1").LkTabs();
$(".tabs_box2").LkTabs("mouseover");
});
</script>
</body>
</html>
封装的 js 插件文件
jquery_LkTabs.js
(function($) {
// What does the LkTabs plugin do?
$.fn.LkTabs = function(tabStyle, options) {
if (!this.length) {
return this;
}
var opts = $.extend(true, {}, $.fn.LkTabs.defaults, options);
this.each(function() {
var $this = $(this);
var tabs_tit = $(this).find('.tabs_tit');
var tabs_tit_a = $(this).find('.tabs_tit a');
var tabs_con = $(this).find('.tabs_con');
var tcon_li = $(this).find('.tabs_con .tcon_li');
// 当不传参时默认为点击切换
if (tabStyle == "" || tabStyle == null) {
$(tabs_tit_a).click(function(event) {
event.preventDefault();
$(this).addClass('active').siblings().removeClass('active');
var a_index = $(this).index();
$(tcon_li).eq(a_index).css('display', 'block');
$(tcon_li).eq(a_index).siblings().css('display', 'none');
});
}
// 当传入 mouseover 时为鼠标移入事件
if (tabStyle == "mouseover") {
$(tabs_tit_a).mouseover(function(event) {
$(this).addClass('active').siblings().removeClass('active');
var a_index = $(this).index();
$(tcon_li).eq(a_index).css('display', 'block');
$(tcon_li).eq(a_index).siblings().css('display', 'none');
});
}
});
return this;
};
// default options
$.fn.LkTabs.defaults = {
};
})(jQuery);
