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实现字体颜色渐变效果的方法
Mar 29 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
JQuery animate动画应用示例
May 14 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jquery实现抽奖功能
Oct 22 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
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
javascript 关闭IE6、IE7
2009/06/01 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
python实现日常记账本小程序
2018/03/10 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
python如何操作mysql
2020/08/17 Python
python 8种必备的gui库
2020/08/27 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
创建青年文明号材料
2014/05/09 职场文书
环保倡议书50字
2014/05/15 职场文书
副处级干部考察材料
2014/05/17 职场文书
优质服务口号
2014/06/11 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
Java中使用Filter过滤器的方法
2021/06/28 Java/Android