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 一键复制到剪切板的实例
Sep 20 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery冲突问题解决方法
Jan 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
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
js静态作用域的功能。
2006/12/25 Javascript
又一个图片自动缩小的JS代码
2007/03/10 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
python决策树之C4.5算法详解
2017/12/20 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
django框架ModelForm组件用法详解
2019/12/11 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
大一学生个人总结
2015/02/15 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫
golang实现浏览器导出excel文件功能
2022/03/25 Golang
python Tkinter模块使用方法详解
2022/04/07 Python
Win10 Anaconda安装python-pcl
2022/04/29 Servers
docker 制作mysql镜像并自动安装
2022/05/20 Servers
GPU服务器的多用户配置方法
2022/07/07 Servers