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 07 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
详解用node编写自己的cli工具
May 23 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 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
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
如何实现JS函数的重载
2006/09/22 Javascript
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
JS动画效果代码3
2008/04/03 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
简单叙述一下MYSQL的优化
2016/05/09 面试题
应届生船舶驾驶求职信
2013/10/19 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
2014年科协工作总结
2014/12/09 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
报案材料怎么写
2015/05/25 职场文书
公司考勤管理制度
2015/08/04 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
python实现简易自习室座位预约系统
2021/06/30 Python
python 进阶学习之python装饰器小结
2021/09/04 Python
Pygame Event事件模块的详细示例
2021/11/17 Python