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中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
JQuery animate动画应用示例
May 14 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
基于jQuery拖拽事件的封装
Nov 29 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多文件上传功能实现原理及代码
2013/04/18 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
ThinkPHP缓存方法S()概述
2014/06/13 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
详谈Node.js之操作文件系统
2017/08/29 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
用Python实现一个简单的线程池
2015/04/07 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
美国智能家居专家:tink
2019/06/04 全球购物
技术经理的自我评价范文
2013/12/03 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
个人委托函范文
2015/01/29 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python