JavaScript tab選項卡功能

admin發表於2018-03-06
JavaScript

選項卡應用非常廣泛，實現的方式也有多種，下面就簡單分享幾個JavaScript實現的選項卡案例。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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程式碼實現：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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"將當前點選的選項卡背景顏色設定為紅色，並將相應的現象卡內容顯示。

相關文章