tab選項卡切換例項程式碼

admin發表於2017-02-28

選項卡效果在網頁中有大量的應用，當然在網上也有大量的例項，本章節就分享一個此類的選項卡效果，並且介紹一下它的實現過程，希望能夠給需要的朋友或者想知道實現原理的朋友帶來一定的幫助。

例項程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>CSS教程-螞蟻部落</title>
<style type="text/css">
li {
  border:1px solid #b5e2f3;
  border-bottom:0px;
  float:left;
  width:100px;
  height:25px;
  margin:0 7px;
  background:#F1FEF3;
  padding:9px 0 0 0;
  text-align:center;
  color:#33a3dc;
  cursor:pointer;
}
ul {
  width:800;
  height:36px;
  border-bottom:1px solid #b5e2f3;
  list-style:none;
}
#selected {
  background:#FFF!important;
  border-bottom:2px solid #FFF!important;
}
ul{margin:-1px;}
#cate1, #cate2, #cate3, #cate4, #cate5 {
  clear:both;
  height:300px;
  background:#FFFFFF;
  width:800px;
  height:100px;
  padding:25px;
border:1px solid #b5e2f3;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
var tab=function(tabId,activeId){ 
  $("#"+tabId).delegate("li:not(#"+activeId+")","click",function(){ 
    $("#"+$("#"+activeId).attr("tar")).css("display","none"); 
    $("#"+activeId).removeAttr("id"); 
    $(this).attr("id",activeId); 
    $("#"+$(this).attr("tar")).css("display","block"); 
  }) 
}
$(document).ready(function(){
  tab("tab","selected"); 
})
</script>
</head>
<body>
<div id="tab">
  <ul>
    <li tar="cate1" id="selected">標題一</li>
    <li tar="cate2">標題二</li>
    <li tar="cate3">標題三</li>
    <li tar="cate4">標題四</li>
  </ul>
</div>
<div>
  <div id="cate1" style="display:block;">螞蟻部落一</div>
  <div id="cate2" style="display:none;">螞蟻部落二</div>
  <div id="cate3" style="display:none;">螞蟻部落三</div>
  <div id="cate4" style="display:none;">螞蟻部落四</div>
</div>
</body>
</html>

以上程式碼實現了簡單的選項卡切換效果，實現的過程也比較簡單，下面做一下簡單的介紹。

一.實現原理:

原理很簡單，在預設狀態下，tab元素下的第一個li元素具有id屬性屬性，通過此屬性設定了它的樣式狀態，同時選項卡內容部分，第一個li是出於現實狀態的，其他處於隱藏狀態。然後為tab元素下id屬性值不為selectd的li元素註冊click事件處理函式，當點選這些li元素的時候，能夠將當前顯示的內容部分隱藏，同時移除之前選中標題li的id屬性，然後設定當前被點選li的id屬性值，同時將相應的內容li顯示。原理大體如此，感覺介紹的比較混亂，最好參閱程式碼註釋，自己分析理解。

二.程式碼註釋:

1.var tab=function(tabId,activeId){}，此函式用來進行切換處理，具有兩個引數，第一個引數是標題li的容器元素id，第二個引數是當前被選中標題li的id屬性值。

2.$("#"+tabId).delegate("li:not(#"+activeId+")","click",function(){})，就本特效而言，是為tab元素下的id屬性值不為selectedli元素註冊click事件處理函式。

3.$("#"+$("#"+activeId).attr("tar")).css("display","none")，將上一個顯示的內容li隱藏。

4.$("#"+activeId).removeAttr("id")，將上一個顯示的標題li中的id屬性值移除。

5.$(this).attr("id",activeId)，設定當前顯示的標題li的id屬性值。

6.$("#"+$(this).attr("tar")).css("display","block")，對應的內容li設定為顯示狀態。

三.相關閱讀:

1.not選擇器可以參閱jQuery :not選擇器一章節。

2.attr()函式可以參閱jQuery attr()一章節。

3.removeAttr()函式可以參閱jQuery removeAttr()一章節。 

4.css()函式可以參閱jQuery css()一章節。

相關文章