最简单纯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教学之性能优化
May 14 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
js转换对象为xml
Feb 17 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
小程序实现多选框功能
Oct 30 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
JavaScript实现联动菜单特效
Jan 07 Javascript
如何用JS实现简单的数据监听
May 06 Javascript
基于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
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
stripos函数知识点实例分享
2019/02/11 PHP
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
Python教程之全局变量用法
2016/06/27 Python
Python分治法定义与应用实例详解
2017/07/28 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
linux下进程间通信的方式
2014/12/23 面试题
高三地理教学反思
2014/01/11 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
实战Python爬虫爬取酷我音乐
2022/04/11 Python
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL