现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果。今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出。
效果图如下:
html代码:
js-tabs
首页 技术 生活 作品
首页首页首页首页首页首页首页首页首页首页
11111 22222 33333
11111111111111111111111111111111111
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 知识,随意写的一些效果。
更多javascript实现tabs选项卡切换效果相关文章请关注PHP中文网!
相关文章: