最简单纯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 相关文章推荐
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
详解react-redux插件入门
Apr 19 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
js+audio实现音乐播放器
Sep 13 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随机生成福彩双色球号码的2种方法
2013/02/04 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
介绍Python中的fabs()方法的使用
2015/05/14 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
求职信格式范本
2013/11/15 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
2014年端午节活动方案
2014/03/11 职场文书
高中教师评语大全
2014/04/25 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
2014年工人工作总结
2014/11/25 职场文书
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android