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 相关文章推荐
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 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 array_merge函数
2014/08/31 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
javascript document.images实例
2008/05/27 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
js+css实现打字效果
2020/06/24 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
jquery的$().each和$.each的区别
2019/01/18 jQuery
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
Python找出list中最常出现元素的方法
2016/06/14 Python
python实现发送邮件功能代码
2017/12/14 Python
20个常用Python运维库和模块
2018/02/12 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
高中生职业规划范文
2014/03/09 职场文书
投标担保书范文
2014/04/02 职场文书
人大代表选举标语
2014/10/07 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
灵山大佛导游词
2015/02/04 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
用php如何解决大文件分片上传问题
2021/07/07 PHP