最简单纯JavaScript实现Tab标签页切换的方式(推荐)


Posted in Javascript onJuly 25, 2016

先说一下最土的一种方法:

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标签页切换的方式(推荐)

实现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标签页切换的方式(推荐),希望对大家有所帮助,如果大家有任何疑问请留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
js实现二级导航功能
Mar 03 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
使用vue-cli编写vue插件的方法
Feb 26 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
javascript实现滚动条效果
Mar 24 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 #Javascript
javascript insertAfter()定义与用法示例
Jul 25 #Javascript
jquery之别踩白块游戏的简单实现
Jul 25 #Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 #Javascript
JavaScript表单焦点自动切换代码
Jul 24 #Javascript
javascript中sort排序实例详解
Jul 24 #Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 #Javascript
You might like
留言板翻页的实现详解
2006/10/09 PHP
PHP中对数据库操作的封装
2006/10/09 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
js脚本实现数据去重
2014/11/27 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
python超时重新请求解决方案
2019/10/21 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
Python新手学习函数默认参数设置
2020/06/03 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
台湾森森购物网:U-mall
2017/10/16 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
党员目标管理责任书
2014/07/25 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js