服务器之家

服务器之家 > 正文

JS实现选项卡插件的两种写法(jQuery和class)

时间:2021-12-22 16:17     来源/作者:南柯Seven

本文实例为大家分享了JS实现选项卡插件的2种写法,供大家参考,具体内容如下

实现插件的几个注意点:

(1)定义一个固定的html结构,比如选项卡的标题的标签为为li,每个选项卡的内容的标签为div等等;
(2)选中时的样式提前确定;
(3)最好先用简单的JS实现选项卡的功能,再改为插件的模式。

html结构如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<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实现选项卡的功能:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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上扩展一个选项卡功能的方法:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
(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);

使用方法:

?
1
2
let $tabBox = $('#tabBox');
$tabBox.tabClick();

实现插件的第二种方法:class

利用ES6中的class类,创建一个选项卡类Tab,并添加属性和方法,并且可以多参数传递实现选项卡:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
(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;
})();

使用方法:

?
1
2
3
4
new Tab('#tabBox', {
 showIndex: 2,
 triggerEvent: 'mouseenter'
});

第二种方法是现在常用的方法,因为它可以传递很多参数。可以根据需求,设置默认要传递的参数,将这个选项卡插件做的更完善。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/m0_37922443/article/details/111884939

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整
蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整 2021-08-24
返回顶部