web前端|js教程
选项卡,切换
web前端-js教程
现在的页面上有许多各种各样的页面效果，常用的有弹出层效果，无缝滚动效果，选项卡切换效果。今天分享一款自己用原生javascript写的选项卡切换效果，由于本人水平有限，如有问题请指出。
效果图如下：
html代码：
php oa系统源码,ubuntu怎么选择163,中间件软件 tomcat,《2001爬虫大战》,php又叫什么,黄冈seo关键词优化怎么样lzw
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;}
首页
技术
生活
作品
首页首页首页首页首页首页首页首页首页首页
diy网页 源码,ubuntu保持远程连接,升级tomcat至最新版本,爬虫木头盲盒,php讲解 按小时收费多少钱,桂林企业seolzw
技术技术技术技术技术技术技术技术技术技术
微信商城源码 java,vscode对比两个分支,ubuntu 实时网速,重装jdk和tomcat,需求图谱爬虫,极路由 php,万词霸屏和seo哪个好lzw
生活生活生活生活生活生活生活生活生活生活
作品作品作品作品作品作品作品作品作品作品
11111
22222
33333
11111111111111111111111111111111111
222222222222222222222222222222222222
333333333333333333333333333333333333333
window.onload = function(){
tabs(‘tabs’,’click’);
tabs(‘tabs2′,’mouseover’);
}
其中 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 = abs-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 知识，随意写的一些效果。
