基于面向对象实现选项卡

littleSun
644 阅读1分钟

基于面向对象的选项卡和面向过程的选项卡有很大的不同，可以任意的去调用。基于面向对象有可扩展性

面向过程实现选项卡：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			background: coral;
		}

		* {
			margin: 0;
			padding: 0;
		}

		#wrap {
			width: 300px;
			height: 300px;
			margin: 100px auto;
			border: #00FFFF solid 1px;
		}

		a {
			text-decoration: none;
			display: inline-block;
			width: 100%;
			height: 100%;
			color: #262626;
			font-size: 18px;
		}

		ul {
			width: 300px;
			height: 40px;
			list-style: none;
			overflow: hidden;
			border: 1px solid aqua;
		}

		ul li {
			float: left;
			width: 100px;
			text-align: center;
			line-height: 40px;
		}

		.content {
			display: none;
		}
		.active {
			background: #3081BF;
			font-weight: bold;
		}
	</style>
	<body>
		<div id="wrap">
			<ul>
				<li class="active"><a href="javascript:void(0)">推荐</a></li>
				<li><a href="javascript:void(0)">小说</a></li>
				<li><a href="javascript:void(0)">导航</a></li>
			</ul>
			<div class="content" style="display: block;">推荐</div>
			<div class="content">小说</div>
			<div class="content">导航</div>
		</div>
		<script type="application/javascript">
			window.onload = function() {
				var wrap = document.getElementById("wrap"); //获取整个div
				var tabLis = wrap.children[0].getElementsByTagName("li"); //获取div下面的li标签
				var contentDivs = wrap.getElementsByTagName("div"); //获取wrap里面所有的div
				// 循环li标签
				for (var i = 0; i < tabLis.length; i++) {   //循环每一个li标签
					tabLis[i].index=i;   //把i绑定到每一个li标签上
					tabLis[i].onclick = function() {
						for (var j = 0; j < tabLis.length; j++) {   //去掉初始化样式
							tabLis[j].className =" ";
							contentDivs[j].style.display='none'
						}
						this.className  = "active";    //添加样式
						contentDivs[this.index].style.display='block'
					}
				}
			}
		</script>
	</body>
</html>

使用闭包函数实现

window.onload = function() {
    var wrap = document.getElementById("wrap"); //获取整个div
    var tabLis = wrap.children[0].getElementsByTagName("li"); //获取div下面的li标签
    var contentDivs = wrap.getElementsByTagName("div"); //获取wrap里面所有的div
    // 循环li标签
    for (var i = 0; i < tabLis.length; i++) {
        tabLis[i].onclick = (function(n){    //此处用n去接收储存的i
            return function() {
            for (var j = 0; j < tabLis.length; j++) {
                tabLis[j].className =" ";
                contentDivs[j].style.display='none'
            }
            this.className  = "active";
            contentDivs[n].style.display='block'
        }
        })(i)    //这个i储存起来
    }
}

上述是一个面向过程的选项卡，如果想要使用这个选项卡，那么我只有按照文中的逻辑代码来实现才行，并未实现封装代码

面向对象实现选项卡

在面向对象中讲到对象有自己的属性和方法，属性和方法尽量分离开。属性通常都是实例属性，方法一般都是共享的方法。 HTML部分

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title></title>
  </head>
  <style>
      body {
          background: coral;
      }

      * {
          margin: 0;
          padding: 0;
      }

      #wrap {
          width: 300px;
          height: 300px;
          margin: 100px auto;
          border: #00FFFF solid 1px;
      }

      a {
          text-decoration: none;
          display: inline-block;
          width: 100%;
          height: 100%;
          color: #262626;
          font-size: 18px;
      }

      ul {
          width: 300px;
          height: 40px;
          list-style: none;
          overflow: hidden;
          border: 1px solid aqua;
      }

      ul li {
          float: left;
          width: 100px;
          text-align: center;
          line-height: 40px;
      }

      .content {
          display: none;
      }
      .active {
          background: #3081BF;
          font-weight: bold;
      }
  </style>
  <body>
      <div id="wrap">
          <ul>
              <li class="active"><a href="javascript:void(0)">推荐</a></li>
              <li><a href="javascript:void(0)">小说</a></li>
              <li><a href="javascript:void(0)">导航</a></li>
          </ul>
          <div class="content" style="display: block;">推荐</div>
          <div class="content">小说</div>
          <div class="content">导航</div>
      </div>
      <script src="./TabSwitch.js"></script>
      <script type="application/javascript">
          window.onload = function() {
              var wrap = document.getElementById("wrap"); //获取整个div
              var tab= new TabSwitch(wrap);

          }
      </script>
  </body>
</html>

JS封装部分

//构造选项卡函数
function TabSwitch(fatherObj){
// 保存this指向
var _this=this;
// 绑定实例属性
this.tabLis = fatherObj.children[0].getElementsByTagName("li"); //获取div下面的li标签
this.contentDivs = fatherObj.getElementsByTagName("div"); //获取wrap里面所有的div
// 遍历每一个li标签
for(var i=0;i<this.tabLis.length;i++){
    this.tabLis[i].index=i;   //绑定i的索引
    this.tabLis[i].onclick=function(){
        // 当前的this指向了我们每一个li标签，每一个li标签上面保存了i
        _this.clickFun(this.index);    //调用方法的时候把index传进来
    }
}
}
// 绑定共享的方法
TabSwitch.prototype.clickFun=function(index){  //这里就可以用index接收
for (var j = 0; j < this.tabLis.length; j++) {
    this.tabLis[j].className =" ";
    this.contentDivs[j].style.display='none'
}
this.tabLis[index].className  = "active";     
this.contentDivs[index].style.display='block'
}
avatar
文章
阅读
粉丝