js实现的tab选项卡功能
js实现的tab选项卡功能
js实现的tab选项卡功能:选项卡功能在各种网站有各种形式的应用和，当时实现选项卡功能的方式也有多种多样，下面就简单介绍一下使用js实现选项卡功能的一种方式，在美观方面就不去精雕细刻了，只介绍js实现此功能的原理。代码实例如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><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，第一个被设置为显示状态，以此与第一个选项卡对应。下面是js代码实现:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><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>
以上代码实现了简单的选项卡功能，下面简单介绍一下js代码是如何控制选项卡的切换功能:一.tabs=document.getElementById("tabs").getElementsByTagName("li")用来获取选li元素选项卡的集合。 tabsContent=document.getElementById("tabsContent").getElementsByTagName("div")用来获取选项卡内容的集合。二.第一个for循环可以为选项卡绑定点击事件处理函数，也就是当鼠标点击li元素的时候就会调用此函数，此事件处理函数又调用changeTabs()函数，并且为此函数传一个参数，此参数为当前点击的li元素的值。需要注意的是，此参数值恰好对应选项卡元素的索引值。三.changeTabs()函数首先使用for循环将之前选中的选项卡中的CSS类清空，也就是背景颜色不再是红色，之前相应被选中的选项卡内容的CSS类清空，也就是将其也置于隐藏状态，然后再使用tabs[tabsValue].className="selected"和tabsContent[tabsValue].className="selected"将当前点击的选项卡背景颜色设置为红色，并将相应的现象卡内容显示。
原文地址:http://www.51texiao.cn/Javascriptjiaocheng/2015/0405/122.html