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中each循环的简单回滚操作
May 05 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jquery插件实现轮播图效果
Oct 19 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
用pycharm开发django项目示例代码
2019/06/13 Python
python requests证书问题解决
2019/09/05 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
python音频处理的示例详解
2020/12/23 Python
python解包用法详解
2021/02/17 Python
《雷雨》教学反思
2014/02/20 职场文书
KTV员工管理制度
2015/08/06 职场文书
银行培训心得体会范文
2016/01/09 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
SQL SERVER中的流程控制语句
2022/05/25 SQL Server