javascript tab选项卡效果详解
本章节分享一段代码实例,它实现了简单的tab选项卡效果。
下面给出代码,并且详细介绍一下它的实现过程。
代码实例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> body,div,ul,li{ padding:0; margin:0; text-align:center; } body{ font:12px "宋体"; text-align:center; } a:link,a:visited{ color:#00F; text-decoration:none; } a:hover,a:active{ color:#c00; text-decoration:underline; } ul{list-style:none;} .box{margin:1em auto;} br{clear:both;} /*菜单class*/ .Menubox{ width:960px; background:#eff8fe; border-bottom:2px #9bcff7 solid; height:36px; line-height:36px; border-top: none; } .Menubox li{ float:left; display:block; cursor:pointer; width:114px; border-right:0px #cccccc solid; text-align:center; color:#0099cc; font-weight:bold; font-size:14px; border-top: 2px solid #98d0f7; border-right: 2px solid #98d0f7; } .Menubox li.hover{ background:#fff; width:116px; border:2px solid #98d0f7; border-bottom:0px solid #fff; color:#dc0004; font-weight:bold; height:36px; line-height:36px; font-size:14px; border-right: 2px solid #98d0f7; border-left: none; } .Menubox li.out{border-top:1px #cccccc solid;} .Contentbox{ width:956px; clear:both; border:2px solid #98d0f7; border-top:0; height:150px; line-height:150px; text-align:center; padding-top:8px; } .Contentbox span{color:#ccc;} </style> <script language="javascript" type="text/javascript"> function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } window.onload=function(){ var Menubox=document.getElementById("Menubox"); var lis=Menubox.getElementsByTagName("li"); for(var index=1;index<lis.length;index++){ (function(index){ lis[index].onclick=function(){ setTab('two',index,4); } })(index) } } </script> </head> <body> <div class="box"> <div id="Menubox" class="Menubox"> <ul> <li style="color:#000000; width:180px">前端教程网</li> <li id="two1" class="hover">连心卡</li> <li id="two2">储蓄卡</li> <li id="two3">信用卡</li> <li id="two4">消费卡</li> </ul> </div> <div class="Contentbox"> <p id="con_two_1" >标题列表1<span>(点击切换)</span></p> <p id="con_two_2" style="display:none">标题列表2<span>(点击切换)</span></p> <p id="con_two_3" style="display:none">标题列表3<span>(点击切换)</span></p> <p id="con_two_4" style="display:none">标题列表4<span>(点击切换)</span></p> </div> </div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).function setTab(name,cursel,n){},此方法实现了选项卡切换功能,第一个参数是一个字符串,其实是li元素id属性值得字符部分,第二个参数是一个数字,和li元素选项卡和p元素内容部分的索引对应,第三个参数是规定有几个选项卡。
(2).for(i=1;i<=n;i++){},一个for循环语句,用于进行比对,然后进行选项卡切换的相关设置,之所以从1开始是因为第一个li元素不是选项卡的一部分。
(3).var menu=document.getElementById(name+i),获取对应索引的li元素对象。
(4).var con=document.getElementById("con_"+name+"_"+i),获取对应索引的p元素对象。
(5).menu.className=i==cursel?"hover":"",如果当前i的值等于cursel,那么就添加class属性并设置属性值为hover。
(6).con.style.display=i==cursel?"block":"none",和上面同样的道理,如果相等,则显示,否则隐藏。
(7).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。
(8).var Menubox=document.getElementById("Menubox"),获取id属性值为Menubox的元素对象。
(9).var lis=Menubox.getElementsByTagName("li"),获取Menubox元素下的所有li元素集合。
(10).for(var index=1;index<lis.length;index++){},for循环语句,遍历每一个li元素。
(11).(function(index){
lis[index].onclick=function(){
setTab('two',index,4);
}
})(index),采用闭包的方式为li元素注册click事件处理函数。
二.相关阅读:
(1).className可以参阅js className一章节。
(2).三元运算符可以参阅javascript 三元运算符一章节。
(3).getElementsByTagName()可以参阅document.getElementsByTagName()一章节。
(4).闭包可以参阅闭包概念简单通俗介绍一章节。
javascript tab选项卡效果详解,这样的场景在实际项目中还是用的比较多的,关于javascript tab选项卡效果详解就介绍到这了。
javascript tab选项卡效果详解属于前端实例代码,有关更多实例代码大家可以查看。