网站首页 » 前端开发 » JavaScript » 纯 JavaScript 实现 tab 切换效果
上一篇:
下一篇:

纯 JavaScript 实现 tab 切换效果

作为前端开发人员,一些效果你肯定会常常用到,在这里我给大家分享一个tab 切换效果,这个效果我已经封闭好了,如果你想用直接把源代码复制到你的项目中就可以了,下一步你只需要在需要用到这个效果的页面调用这个函数就可以了,不管页面中有多少个Tab 切换,你都可以轻而易举地完成。下面我就直接把源代码贴出来。

移动端 Tab 切换

JavaScript 代码

function tab(tabWrap,tabMenu,tabLink,tabContent,tabPanel,tabEffect,fn){
// tabMenu - Tab导航 ,tabLink每个点击块
// tabContent - Tab内容 ,tabPanel 每个内容块
// tabContent - effect 效果,可以自定义切换效果,可以配合animate.css或者其它一些CSS3效果库一起使用
var tabWrap = document.querySelector(tabWrap);
var tabMenu = tabWrap.querySelector(tabMenu);
var tabContent = tabWrap.querySelector(tabContent);
var tabMenuL = tabMenu.querySelectorAll(tabLink);
var tabContentUl = tabContent.querySelectorAll(tabPanel);
var tabLen = tabMenuL.length;
var oldLinkClass = tabMenuL[1].className;
var oldClass = tabContentUl[0].className;
for(var i=0;i<tabLen;i++){
 tabMenuL[i].index = i;
 tabMenuL[i].onmouseover = function(){
  for(var i=0;i<tabLen;i++){
   tabContentUl[i].className = oldClass;
   tabContentUl[i].style.display = 'none';
   tabMenuL[i].className = oldLinkClass;
  }
 this.className = oldLinkClass + ' ' + ' active';
 tabContentUl[this.index].style.display = 'block';
 if(fn){fn()}
 if(tabEffect){tabContentUl[this.index].className = oldClass + ' ' + tabEffect;}
 }
}
}

在需要实现Tab切换的页面中像下面这样往函数里传几个参数就可以了。

tab('.tab-wrap','.tab-menu','.tab-link','.tab-content','.tab-panel');

HTML代码

函数里面的参数各代表什么呢?我们来看看下面这个HTML结构你就会明白了。

<div class="tab-wrap">
 <div class="tab-menu">
  <a class="tab-link active" href="javascript:;"></a>
  <a class="tab-link" href="javascript:;"></a>
  <a class="tab-link" href="javascript:;"></a>
 </div>
 <div class="tab-content">
  <div class="tab-panel">
   ......
  </div>
  <div class="tab-panel">
   ......
  </div>
  <div class="tab-panel">
   ......
  </div>
  <div class="tab-panel">
  ......
  </div>
 </div>
</div>

心细的你应该已经看出来了,这个函数还可以往里再多传两个参数,那么这两个参数的作用是什么呢?

tabEffect:就是切换的效果,这里是通过传入Class类来实现的,你可以配合animate.css 动画库来实现无比炫的效果,关于animate.css的使用方法你可以参考这篇文章《Animate.css 使用教程(一个强大的 CSS3 动画库)》。如果你想让你的Tab切换效果变得与众不同的话。

fn:这个就是回调函数了。你可以在点击完切换按钮后执行一个函数来满实际项目中的需求。下面就给你看看这个完整的调用方法。

tab('.tab-wrap','.tab-menu','.tab-link','.tab-content','.tab-panel','animated flipInY',function(){
alert('我是一个用了都说好的 Tab 切换!');
});

这个 Tab 切换虽然不依赖于任何库,但是正是因为这样,它也有一丢丢的局限性,下面我们变来看看它存在哪些不足,或者缺点。

由于这个 Tab 切换中使用了 querySelector() 方法和 querySelectorAll() 方法,所以我们得知道这个就去是何方神圣。我们说的第一个缺点是关于这两个方法的性能问题。如果想通过这两个方法获取数量足够多的元素时,那么这两个方法会存在一定的性能问题,具体的性能细节比较你可以看看我之前写过的一篇文章《document.querySelector()》,但是关于这两个方法的性能问题对实际应用中的影响,你真的可以放心好了,因为只有在比较极端的情况下才会出现明显的性能问题,但对于一般的情况来说这个性能问题不足以让你放弃这个这么好用的 Tab 切换。

我要说的第二个不足也是关于 querySelector() 方法和 querySelectorAll() 方法这两个方法的。那就是兼容性的问题,我们来看下他们的兼容性

queryselector 浏览器支持情况

从上面的图示中我们可以看到如果想让这个 Tab 切换效果运行起来,对于IE浏览器至少得是IE9及以上版本才可以,IE8只是部分支持。对于其它现在浏览器来说这无全没有问题。

综上所述,这个 Tab 切换我们如果是把它用到移动端的话是完全没问题的。至于PC端就得看你的项目需要了。毕竟可恶的 IE8 还是存在于用户中的。 但可喜的是,现在连微软自己都放弃了统治了多年的IE浏览器,重新开发出一款全新的现代浏览器Edge,所以你还是可以大胆到试着使用它的。

PC端 Tab 切换

我们不妨对上面的代码稍作修改,让它更好地兼容PC端。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tab 切换</title>
</head>
<body>
	
<div class="tab-wrap">
 <div id="tab-menu">
  <a class="tab-link active" href="javascript:;">TAB1</a>
  <a class="tab-link" href="javascript:;">TAB2</a>
  <a class="tab-link" href="javascript:;">TAB3</a>
  <a class="tab-link" href="javascript:;">TAB4</a>
 </div>
 <ul id="tab-content">
  <li class="tab-panel" style="display:block">
   ......TAB1
  </li>
  <li class="tab-panel" style="display:none">
   ......TAB2
  </li>
  <li class="tab-panel" style="display:none">
   ......TAB3
  </li>
  <li class="tab-panel" style="display:none">
  ......TAB4
  </li>
 </ul>
</div>

</body>
</html>

 JavaScript 代码

tab('tab-menu','a','tab-content','li'); // 调用
function tab(tabMenu,tabLink,tabContent,tabPanel,tabEffect,fn){
// tabMenu - Tab导航 ,tabLink每个点击块
// tabContent - Tab内容 ,tabPanel 每个内容块
// tabContent - effect 效果,可以自定义切换效果,可以配合animate.css或者其它一些CSS3效果库一起使用
var tabMenu = document.getElementById(tabMenu);
var tabContent = document.getElementById(tabContent);
var tabMenuL = tabMenu.getElementsByTagName(tabLink);
var tabContentUl = tabContent.getElementsByTagName(tabPanel);
var tabLen = tabMenuL.length;
var oldLinkClass = tabMenuL[1].className;
var oldClass = tabContentUl[0].className;
for(var i=0;i<tabLen;i++){
 tabMenuL[i].index = i;
 tabMenuL[i].onmouseover = function(){
  for(var i=0;i<tabLen;i++){
   tabContentUl[i].className = oldClass;
   tabContentUl[i].style.display = 'none';
   tabMenuL[i].className = oldLinkClass;
  }
 this.className = oldLinkClass + ' ' + ' active';
 tabContentUl[this.index].style.display = 'block';
 if(fn){fn()}
 if(tabEffect){tabContentUl[this.index].className = oldClass + ' ' + tabEffect;}
 }
}
}

兼容PC的Tab 切换就做好了,但是这个Tab也有一些不尽如人意的地方,比如:内容块的切换只能用类似于ul li 的标签,并且li标签里面不能再包含li了不然就会出现问题。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/javascript-tab/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END