物件導向實現的tab選項卡效果程式碼例項

admin發表於2017-04-15
物件

分享一段程式碼例項，它實現了tab選項卡效果。

並且採用物件導向的方式實現tab選項卡，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.tabMenu {
  width: 300px;
  margin: 50px auto 0 auto;
}
.tabMenu ul {
  display: block;
  overflow: hidden;
  width: 300px;
  height: 40px;
  background: #eee;
}
.tabMenu ul li {
  cursor: pointer;
  display: block;
  float: left;
  width: 100px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
.tabMenu ul li.active {
  background: #f00;
  color: #fff;
}
.tabMenu .tabSide {
  display: none;
  padding: 10px;
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-all;
  width: 278px;
  border: solid 1px #eee;
}
.tabMenu div.active {
  display: block;
  padding: 10px;
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-all;
  width: 278px;
  border: solid 1px #eee;
}
</style>
<script>
window.onload = function () {
  var main = document.getElementById("tabMain");
  var tab = new Tab(main);
  tab.init();
}
 
function Tab(id) {
  this.aLi = id.getElementsByTagName("li");
  this.oDiv = id.getElementsByTagName("div");
}
Tab.prototype.init = function () {
  var obj = this;
  for (var index = 0; index < obj.aLi.length; index++) {
    obj.aLi[index].index = index;
    obj.aLi[index].onclick = function () {
      obj.fnClick(this);
    }
  }
}
 
Tab.prototype.fnClick = function (aLi) {
  for (var index = 0; index < this.aLi.length; index++) {
    this.aLi[index].className = "";
    this.oDiv[index].style.display = "none";
  }
  aLi.className = "active";
  this.oDiv[aLi.index].style.display = "block";
};
</script>
</head>
<body>
  <div id="tabMain" class="tabMenu">
    <ul>
      <li class="active">螞蟻部落一</li>
      <li>螞蟻部落二</li>
      <li>螞蟻部落三</li>
    </ul>
    <div class="tabSide active">css教程</div>
    <div class="tabSide">div教程</div>
    <div class="tabSide">js教程</div>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload = function () {}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var main = document.getElementById("tabMain")，獲取選項卡的容器元素。

（3）.var tab = new Tab(main),建立一個物件例項，建構函式的引數就是選項卡容器元素。

（4）.tab.init()，進行一些初始化操作。

（5）.function Tab(id) {

  this.aLi = id.getElementsByTagName("li");

  this.oDiv = id.getElementsByTagName("div");

}，建構函式，引數是一個元素物件。

（6）.Tab.prototype.init = function () {}，為原型物件新增一個init方法，它可以實現一些初始化操作。

（7）.var obj = this，將this暫存於變數obj，因為在不同的上下文長this指向的物件可能會不同，防止衝突。

（8）.for (var index = 0; index < obj.aLi.length; index++) {}，通過for迴圈批量註冊事件處理函式。

（9）.obj.aLi[index].index = index，為當前元素物件自定義一個index屬性，並賦值為當前索引值。

（10）.obj.aLi[index].onclick = function () {

  obj.fnClick(this);

}，註冊onclick事件處理函式。

（11）.Tab.prototype.fnClick = function (aLi) {}，實現了選項卡切換效果，引數是當前點選的li元素物件。

（12）.for (var index = 0; index < this.aLi.length; index++) {

  this.aLi[index].className = "";

  this.oDiv[index].style.display = "none";

}，通過for迴圈先將所有選項卡的class屬性值清空，並將選項卡內容部分隱藏。

（13）.aLi.className = "active";this.oDiv[aLi.index].style.display = "block"，然後將當前點選的選項卡的class屬性值設定為active，對應索引的選項卡內容設定為顯示。

二.相關閱讀:

（1）.getElementsByTagName()可以參閱document.getElementsByTagName()一章節。

（2）.prototype可以參閱javascript prototype原型一章節。

（3）.className可以參閱js className一章節。

相關文章