JavaScript实现Tab标签页切换的最简便方式(4种)


Posted in Javascript onJune 28, 2020

先说一下最土的一种方法:

Html:

<div class="tab-head">
      <h2 id="tab1" onmouseover="changeTab1()" class="selected">1</h2>
      <h2 id="tab2" onmouseover="changeTab2()">2</h2>
      <h2 id="tab3" onmouseover="changeTab3()">3</h2>
    </div>
    <div class="tab-content">
      <div id="c1" class="show">content1</div>
      <div id="c2">content2</div>
      <div id="c3">content3</div>
    </div>

CSS:

h2 {
        border-top: solid cornflowerblue 1px;
        border-left: solid cornflowerblue 1px;
        width: 50px;
        height: 25px;
        margin: 0;
        float: left;
        text-align: center;
      }
      
      .tab-content {
        border: solid cornflowerblue 1px;
        width: 152px;
        height: 100px;
      }
      
      .tab-content div{
        display: none;
      }
      
      .selected {
        background-color: cornflowerblue;
      }
      
      .tab-content .show{
        display: block;
      }

JS:

var tab1 = document.getElementById('tab1'),
        tab2 = document.getElementById('tab2'),
        tab3 = document.getElementById('tab3'),
        c1 = document.getElementById('c1'),
        c2 = document.getElementById('c2'),
        c3 = document.getElementById('c3');

      function changeTab1() {
        tab1.className = 'selected';
        tab2.className = '';
        tab3.className = '';
        c1.className = 'show'
        c2.className = '';
        c3.className = '';
      }

      function changeTab2() {
        tab1.className = '';
        tab2.className = 'selected';
        tab3.className = '';
        c1.className = '';
        c2.className = 'show';
        c3.className = '';
      }

      function changeTab3() {
        tab1.className = '';
        tab2.className = '';
        tab3.className = 'selected';
        c1.className = ''
        c2.className = '';
        c3.className = 'show';
      }

效果:

JavaScript实现Tab标签页切换的最简便方式(4种)

实现Tab的切换,我们很容易想到的一种方式就是给每一个要控制的标签添加id,然后分别编写鼠标事件,使用id获取每个元素,精确地控制每个元素的样式。

这种方式的缺点显而易见,有几个元素就有几个id,每个tab都要编写function,里面的方法大同小异。要增加tab的话,还要增加id和function,代码冗余,不易扩展。

第二种较为高明些的方法是编写一个function,将每个元素的序号传进去。

Html:

<div class="tab-head">
      <h2 onmouseover="changeTab(0)" class="selected">1</h2>
      <h2 onmouseover="changeTab(1)">2</h2>
      <h2 onmouseover="changeTab(2)">3</h2>
    </div>
    <div class="tab-content">
      <div class="show">content1</div>
      <div>content2</div>
      <div>content3</div>
    </div>

JS:

var tabs = document.getElementsByClassName('tab-head')[0].getElementsByTagName('h2'),
        contents = document.getElementsByClassName('tab-content')[0].getElementsByTagName('div');

      function changeTab(index) {
        for(var i = 0, len = tabs.length; i < len; i++) {
          if(i === index) {
            tabs[i].className = 'selected';
            contents[i].className = 'show';
          }else{            tabs[i].className = '';
            contents[i].className = '';          }
        }
      }

这样就只要写一个function了,而且不需要id,但是还是要按照顺序传递参数。

第三种方式和第二种基本一样,只是参数传递的是this指针。

Html:

<div class="tab-head">
      <h2 onmouseover="changeTab(this)" class="selected">1</h2>
      <h2 onmouseover="changeTab(this)">2</h2>
      <h2 onmouseover="changeTab(this)">3</h2>
    </div>
    <div class="tab-content">
      <div class="show">content1</div>
      <div>content2</div>
      <div>content3</div>
    </div>

JS:

var tabs = document.getElementsByClassName('tab-head')[0].getElementsByTagName('h2'),
        contents = document.getElementsByClassName('tab-content')[0].getElementsByTagName('div');

      function changeTab(tab) {
        for(var i = 0, len = tabs.length; i < len; i++) {
          if(tabs[i] === tab) {
            tabs[i].className = 'selected';
            contents[i].className = 'show';
          } else {
            tabs[i].className = '';
            contents[i].className = '';
          }
        }
      }

这种方式稍微方便一些,只要传递this指针,不用按照顺序传递序号,但这也不是最简便的方式。

最简便的一种:

第四种方式:

Html:

<div class="tab-head">
      <h2 class="selected">1</h2>
      <h2>2</h2>
      <h2>3</h2>
    </div>
    <div class="tab-content">
      <div class="show">content1</div>
      <div>content2</div>
      <div>content3</div>
    </div>

JS:

var tabs = document.getElementsByClassName('tab-head')[0].getElementsByTagName('h2'),
        contents = document.getElementsByClassName('tab-content')[0].getElementsByTagName('div');

      (function changeTab(tab) {
        for(var i = 0, len = tabs.length; i < len; i++) {
          tabs[i].onmouseover = showTab;
        }
      })();

      function showTab() {
        for(var i = 0, len = tabs.length; i < len; i++) {
          if(tabs[i] === this) {
            tabs[i].className = 'selected';
            contents[i].className = 'show';
          } else {
            tabs[i].className = '';
            contents[i].className = '';
          }
        }
      }

这样JS、Html、CSS就完全分离了,通过this指针就可以判断当前鼠标滑过的是哪一个tab了。

到此这篇关于JavaScript实现Tab标签页切换的最简便方式(4种)的文章就介绍到这了,更多相关JavaScript Tab标签页切换内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
微信小程序实现可长按移动控件
Nov 01 Javascript
微信小程序实现拍照和相册选取图片
May 09 Javascript
vuex实现购物车功能
Jun 28 #Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 #Javascript
详细分析Node.js 模块系统
Jun 28 #Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 #Javascript
js瀑布流布局的实现
Jun 28 #Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 #Javascript
vue实现登录拦截
Jun 29 #Javascript
You might like
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
如何分别全角和半角以避免乱码
2006/10/09 PHP
php生成EXCEL的东东
2006/10/09 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
在Python中定义和使用抽象类的方法
2016/06/30 Python
Python类属性的延迟计算
2016/10/22 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
Python如何调用JS文件中的函数
2019/08/16 Python
Python批量启动多线程代码实例
2020/02/18 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
养殖项目策划书范文
2014/01/13 职场文书
市三好学生主要事迹
2014/01/28 职场文书
中国梦口号
2014/06/13 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
母亲节感言
2015/08/03 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
python实现三次密码验证的示例
2021/04/29 Python
Java实现简易的分词器功能
2021/06/15 Java/Android
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis