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判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 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 新手入门教程
2009/08/03 PHP
destoon常用的安全设置概述
2014/06/21 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
基于php实现的验证码小程序
2016/12/13 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
jQuery 自定义函数写法分享
2012/03/30 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
详解Nuxt.js 实战集锦
2019/11/19 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
python编写弹球游戏的实现代码
2018/03/12 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
Python调用.NET库的方法步骤
2019/12/27 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
英国名牌男装店:Standout
2021/02/17 全球购物
致100米运动员广播稿
2014/02/14 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
个人股份合作协议书
2014/10/24 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
网络营销实训总结
2015/08/03 职场文书
部门主管竞聘书
2015/09/15 职场文书
优秀大学生申请书
2019/06/24 职场文书