面向对象实现的tab选项卡效果代码实例

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了tab选项卡效果。

并且采用面向对象的方式实现tab选项卡,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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一章节。

面向对象实现的tab选项卡效果代码实例,这样的场景在实际项目中还是用的比较多的,关于面向对象实现的tab选项卡效果代码实例就介绍到这了。

面向对象实现的tab选项卡效果代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容