JS实现选项卡插件的两种写法(jQuery和class)


Posted in jQuery onDecember 30, 2020

本文实例为大家分享了JS实现选项卡插件的2种写法,供大家参考,具体内容如下

实现插件的几个注意点:

(1)定义一个固定的html结构,比如选项卡的标题的标签为为li,每个选项卡的内容的标签为div等等;
(2)选中时的样式提前确定;
(3)最好先用简单的JS实现选项卡的功能,再改为插件的模式。

html结构如下:

<style>
 * {
 margin: 0;
 padding: 0;
 }

 ul {
 list-style: none;
 }

 #tabBox {
 box-sizing: border-box;
 margin: 20px auto;
 width: 500px;
 }

 .navBox {
 display: flex;
 position: relative;
 top: 1px;
 }

 .navBox li {
 box-sizing: border-box;
 margin-right: 10px;
 padding: 0 10px;
 line-height: 35px;
 border: 1px solid #999;
 cursor: pointer;
 }

 .navBox li.active {
 border-bottom-color: #FFF;
 }

 #tabBox>div {
 display: none;
 box-sizing: border-box;
 padding: 10px;
 height: 150px;
 border: 1px solid #999;
 }

 #tabBox>div.active {
 display: block;
 }
 </style>
 
 <div id="tabBox">
 <ul class="navBox">
 <li class="active">编程</li>
 <li>读书</li>
 <li>运动</li>
 </ul>
 <div class="active">编程使我快乐</div>
 <div>读书使我幸福</div>
 <div>运动使我健康</div>
</div>

先用JS实现选项卡的功能:

let len = liList.length;
 for(let i = 0; i < len; i++) {
  liList[i].index = i;
  liList[i].onclick = function() {
  for(let j = 0; j < len; j++) {
   if(j === this.index) {
   liList[j].className = 'active';
   contentList[j].className = 'active';
   }
   else{
   liList[j].className = '';
   contentList[j].className = '';
   }
  }
 };
}

实现插件的第一种方法:jQuery

利用$.fn.extend方法,在jQuery上扩展一个选项卡功能的方法:

(function($){
 function clickLi() {
 let $this = this,
  $navBox = $this.find('.navBox'),
  $liList = $navBox.find('li'),
  $contentList = $this.find('div');

 $liList.click(function(){
  let $this = $(this),
  index = $this.index();
  $this.addClass('active').siblings().removeClass('active');
  $contentList.eq(index).addClass('active').siblings().removeClass('active');
 });
 }

 $.fn.extend({
 tabClick: clickLi
 });
})(jQuery);

使用方法:

let $tabBox = $('#tabBox');
$tabBox.tabClick();

实现插件的第二种方法:class

利用ES6中的class类,创建一个选项卡类Tab,并添加属性和方法,并且可以多参数传递实现选项卡:

(function(){
 class Tab {
 constructor(selector, options) {
  // 处理第一个参数
  if(!selector)
  throw new ReferenceError('The first selector parameter must be passed~~');
  if(typeof selector === 'string')
  this.container = document.querySelector(selector);
  else if(selector.nodeType)
  this.container = selector;

  this.initialParams(options);

  this.navBox = this.container.querySelector('.navBox'),
  this.liList = this.navBox.querySelectorAll('li'),
  this.contentList = this.container.querySelectorAll('div'),
  this.count = this.liList.length;
  
  this.change();
  this.handleLi();
 }

 // 初始化参数
 initialParams(options) {
  let _default = {
  showIndex: 0,
  triggerEvent: 'click'
  };

  for(let key in options) {
  if (!options.hasOwnProperty(key)) break;
  _default[key] = options[key];
  }

  // 把信息挂载到实例上
  for (let key in _default) {
 if (!_default.hasOwnProperty(key)) break;
 this[key] = _default[key];
 }
 }

 // 切换标题
 change() {
  [].forEach.call(this.liList, (item, index) => {
  if(index === this.showIndex) {
   this.liList[index].className = 'active';
   this.contentList[index].className = 'active';
   return;
  }
  this.liList[index].className = '';
  this.contentList[index].className = '';
  });
 }

 // 绑定标题对应的事件
 handleLi() {
  [].forEach.call(this.liList, (item, index) => {
  item.addEventListener(this.triggerEvent, () => {
   this.showIndex = index;
   this.change();
  });
  });
 }
 }
 window.Tab = Tab;
})();

使用方法:

new Tab('#tabBox', {
 showIndex: 2,
 triggerEvent: 'mouseenter'
});

第二种方法是现在常用的方法,因为它可以传递很多参数。可以根据需求,设置默认要传递的参数,将这个选项卡插件做的更完善。

如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery实现简单轮播图效果
Dec 27 #jQuery
原生jQuery实现只显示年份下拉框
Dec 24 #jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 #jQuery
jquery实现图片放大镜效果
Dec 23 #jQuery
jQuery实现增删改查
Dec 22 #jQuery
jQuery实现本地存储
Dec 22 #jQuery
jQuery实现电梯导航模块
Dec 22 #jQuery
You might like
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
Javascript 错误处理的几种方法
2009/06/13 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
Python Deque 模块使用详解
2014/07/04 Python
Python抓取百度查询结果的方法
2015/07/08 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
python如何保证输入键入数字的方法
2019/08/23 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
中学生自我评价范文
2014/02/08 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
品德评语大全
2014/05/05 职场文书
2014年电工工作总结
2014/11/20 职场文书
阿凡达观后感
2015/06/10 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
小学科学课教学反思
2016/02/23 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript