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特殊字符转义介绍
Nov 05 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
js如何编写简单的ajax方法库
Aug 02 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 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
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
python处理document文档保留原样式
2019/09/23 Python
python:动态路由的Flask程序代码
2019/11/22 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
家具厂厂长岗位职责
2014/01/01 职场文书
单位领导证婚词
2014/01/14 职场文书
公益活动邀请函
2014/02/05 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
给下属加薪申请报告
2015/05/15 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
Java 在线考试云平台的实现
2021/11/23 Java/Android
解决Oracle数据库用户密码过期
2022/05/11 Oracle
pycharm无法安装cv2模块问题
2022/05/20 Python
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS