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 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
vue加载完成后的回调函数方法
Sep 07 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
vue前端工程的搭建
Mar 31 Vue.js
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
需要注意的几个PHP漏洞小结
2012/02/05 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
JavaScript window.location对象
2014/11/14 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
js中less常用的方法小结
2017/08/09 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
简单实现python聊天程序
2018/04/01 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
python批量爬取下载抖音视频
2019/06/17 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
物业工程部经理岗位职责
2015/04/09 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
民事纠纷协议书
2016/03/23 职场文书