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选项卡功能就介绍到这了。

回复

我来回复
  • 暂无回复内容