JavaScript tab选项卡功能
JavaScript tab选项卡功能属于前端实例代码,有关更多实例代码大家可以查看。
选项卡应用非常广泛,实现的方式也有多种,下面就简单分享几个JavaScript实现的选项卡案例。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>tab选项卡的实现</title> <style type="text/css"> *{ padding:0px; margin:0px; } #tabs{ width:250px; height:20px; border-bottom:3px solid red; list-style:none; } #tabs li{ width:50px; height:20px; float:left; margin-left:5px; font-size:12px; line-height:25px; background-color:#999; cursor:pointer; } #tabs .selected{ background-color:red; } #tabsContent div{ width:248px; border:1px solid black; border-top:none; height:50px; display:none; } #tabsContent .selected{ display:block; } </style> </head> <body style="margin:100px;"> <div> <ul id="tabs"> <li class="selected">选项卡一</li> <li>选项卡二</li> <li>选项卡三</li> </ul> <div id="tabsContent"> <div class="selected">内容一</div> <div>内容二</div> <div>内容三</div> </div> </div> </body> </html>
以上代码是选项卡的静态实现,默认状态第一个选项卡与其他的选项卡具有不同的背景色,处于被选中状态。
选项卡内容:第一个被设置为显示状态,其他两个被设置为display:none,以此与第一个选项卡对应。
下面是JavaScript代码实现:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>tab选项卡的实现</title> <style type="text/css"> *{ padding:0px; margin:0px; } #tabs{ width:250px; height:20px; border-bottom:3px solid red; list-style:none; } #tabs li{ width:50px; height:20px; float:left; margin-left:5px; font-size:12px; line-height:25px; background-color:#999; cursor:pointer; } #tabs .selected{ background-color:red; } #tabsContent div{ width:248px; border:1px solid black; border-top:none; height:50px; display:none; } #tabsContent .selected{ display:block; } </style> <script type="text/javascript"> window.onload=function(){ var tabs=document.getElementById("tabs").getElementsByTagName("li"); var tabsContent=document.getElementById("tabsContent").getElementsByTagName("div"); for(i=0;i<tabs.length;i++){ tabs[i].value=i; tabs[i].onclick=function(){ changeTabs(this.value); } } function changeTabs(tabsValue){ for(var y=0;y<tabs.length;y++){ tabs[y].className=" "; tabsContent[y].className=" "; } tabs[tabsValue].className="selected"; tabsContent[tabsValue].className="selected"; } } </script> </head> <body style="margin:100px;"> <div> <ul id="tabs"> <li class="selected">选项卡一</li> <li>选项卡二</li> <li>选项卡三</li> </ul> <div id="tabsContent"> <div class="selected">内容一</div> <div>内容二</div> <div>内容三</div> </div> </div> </body> </html>
(1).tabs=document.getElementById("tabs").getElementsByTagName("li")获取选li元素选项卡的集合。
tabsContent=document.getElementById("tabsContent").getElementsByTagName("div")获取选项卡内容集合。
(2).第一个for循环为选项卡绑定点击事件处理函数,也就是当鼠标点击li元素的时候就会调用此事件处理函数,事件处理函数调用changeTabs函数,并为此函数传一个参数,此参数为当前点击的li元素的值。需要注意的是,此参数值恰好对应选项卡元素的索引值。
(3).changeTabs函数首先使用for循环将之前选中的选项卡中的CSS类清空,也就是背景颜色不再是红色,之前相应被选中的选项卡内容的CSS类清空,也就是将其也置于隐藏状态,然后再使用tabs[tabsValue].className="selected"和tabsContent[tabsValue].className="selected"将当前点击的选项卡背景颜色设置为红色,并将相应的现象卡内容显示。
JavaScript tab选项卡功能,这样的场景在实际项目中还是用的比较多的,关于JavaScript tab选项卡功能就介绍到这了。