最简单纯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 相关文章推荐
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
js实现菜单跳转效果
Dec 11 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
基于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 array_slice函数的使用以及参数详解
2008/08/30 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
Python异常学习笔记
2015/02/03 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
python3代码中实现加法重载的实例
2020/12/03 Python
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
C语言面试题
2013/05/19 面试题
Linux文件操作命令都有哪些
2016/07/23 面试题
经济系大学生求职信
2013/10/01 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
高中生逃课检讨书
2014/10/10 职场文书
跑吧孩子观后感
2015/06/10 职场文书
Android实现图片九宫格
2022/06/28 Java/Android