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 flash激活
Oct 19 Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
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
wordpress之wp-settings.php
2007/08/17 PHP
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
php显示时间常用方法小结
2015/06/05 PHP
php实现可逆加密的方法
2015/08/11 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
介绍Python中的__future__模块
2015/04/27 Python
python实现简单爬虫功能的示例
2016/10/24 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
python pytest进阶之fixture详解
2019/06/27 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
Python ini文件常用操作方法解析
2020/04/26 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
竞选班长演讲稿
2013/12/30 职场文书
房地产项目策划书
2014/02/05 职场文书
综治维稳工作汇报
2014/10/27 职场文书
庆七一活动简报
2015/07/20 职场文书