javascript实现tabs选项卡切换效果(自写原生js)
时间：2024-04-22 22:23:43
现在的页面上有许多各种各样的页面效果，常用的有弹出层效果，无缝滚动效果，选项卡切换效果。今天分享一款自己用原生javascript写的选项卡切换效果，由于本人水平有限，如有问题请指出。
效果图如下： 
html代码：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>js-tabs</title>
<link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
<style type="text/css">
a{color:#a0b3d6;}
.tabs{border:1px solid #a0b3d6;margin:100px;width:300px;}
.tabs-nav a{background:#eaf0fd;line-height:30px;padding:0 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6;float:left;}
.tabs-nav .on{background:white;border-bottom:1px solid white;_position:relative;}
.tabs-content{padding:20px;border-top:1px solid #a0b3d6;margin-top:-1px;}
</style>
</head>
<body>
<div class="tabs" id="tabs">
<h2 class="tabs-nav clearfix">
<a href="javascript:;" class="on">首页</a>
<a href="javascript:;">技术</a>
<a href="javascript:;">生活</a>
<a href="javascript:;">作品</a>
</h2>
<p class="tabs-content">首页首页首页首页首页首页首页首页首页首页</p>
<p class="tabs-content hide">技术技术技术技术技术技术技术技术技术技术</p>
<p class="tabs-content hide">生活生活生活生活生活生活生活生活生活生活</p>
<p class="tabs-content hide">作品作品作品作品作品作品作品作品作品作品</p>
</div>
<br/><br/>
<div class="tabs" id="tabs2">
<h2 class="tabs-nav clearfix">
<a href="javascript:;" class="on">11111</a>
<a href="javascript:;">22222</a>
<a href="javascript:;">33333</a>
</h2>
<p class="tabs-content">11111111111111111111111111111111111</p>
<p class="tabs-content hide">222222222222222222222222222222222222</p>
<p class="tabs-content hide">333333333333333333333333333333333333333</p>
</div>
</body>
</html>
<script type="text/javascript" src="tabs.js"></script>
<script type="text/javascript">
window.onload = function(){
tabs('tabs','click');
tabs('tabs2','mouseover');
}
</script>
其中 base.css 参考我的CSS框架——base.css。
javascript 代码：
function tabs(id,trigger){
var tabsBtn = document.getElementById(id).getElementsByTagName('h2')[0].getElementsByTagName('a');
var tabsContent = document.getElementById(id).getElementsByTagName('p');
for(var i = 0,len = tabsBtn.length; i < len; i++){
tabsBtn[i].index = i;
if(trigger == 'click'){
tabsBtn[i].onclick = function(){
clearClass();
this.className = 'on';
showContent(this.index);
}
}else if(trigger == 'mouseover'){
tabsBtn[i].onmouseover = function(){
clearClass();
this.className = 'on';
showContent(this.index);
}
}
}
function showContent(n){
for(var i = 0,len = tabsBtn.length; i < len; i++){
tabsContent[i].className = 'hide';
}
tabsContent[n].className = 'tabs-content';
}
function clearClass(){
for(var i = 0,len = tabsBtn.length; i < len; i++){
tabsBtn[i].className = '';
}
}
}
注意：
1、标题如首页、技术、生活和作品是在 h2 标签中。
2、显示当前标题使用 class 名为 on 的类，如果修改成其他 class 的如 selected，就需要修改 tabs.js 中相对应的内容。
3、标题所对应的内容是在 p 标签中。p 标签中不能再有 p 标签。
PS：这是本人闲着无聊，通过自己所学的 javascript 知识，随意写的一些效果。
标签：选项卡,切换
0
投稿猜你喜欢
ExtJS判断IE浏览器类型的方法
2024-05-13 10:35:56
vue实现页面添加水印
2024-05-10 14:19:59
python3字符串输出常见面试题总结
2021-01-13 08:39:23
python神经网络slim常用函数训练保存模型
2023-07-14 14:22:23
Python基础入门之魔法方法与异常处理
2021-07-01 07:29:39
textarea 在IE和FF下换行无法正常显示的解决方法
2022-09-11 01:33:40
python基础之编码规范总结
2021-04-17 06:13:26
ES6新特性一： let和const命令详解
2024-05-22 10:37:14
Sql Server 视图数据的增删改查教程
2024-01-22 07:51:05
Python多进程写入同一文件的方法
2023-09-08 10:20:24
WEB2.0网页制作标准教程（1）选择什么样的DOCTYPE
2007-11-13 12:57:00
python实现selenium网络爬虫的方法小结
2023-01-13 03:43:38
python批量提取图片信息并保存的实现
2021-10-08 05:21:14
MySql 8.0.11安装配置教程
2024-01-18 23:41:46
Python图像处理之gif动态图的解析与合成操作详解
2022-09-27 18:19:51
python中uuid模块实例浅析
2022-06-16 01:01:24
Python requests接口测试实现代码
2023-09-10 18:09:21
使用cmd命令行窗口操作SqlServer的方法
2024-01-17 06:13:13
仿QQ和MSN消息提示的效果代码
2010-03-16 12:17:00
go 字符串修改的操作代码
2024-05-13 10:40:18