面向对象tab栏

63 阅读 0 评论 42 点赞

我是靠谱客的博主靓丽自行车，最近开发中收集的这篇文章主要介绍面向对象tab栏，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一.什么是js面向对象，特点，怎么写构造函数。

1.对象是一个整体，对外提供一些操作；那么面向对象就是说，使用对象的时候，你可以直接使用它所提供的功能而忽略其内部组成情况。就好比一台空调，你只要了解它怎么去使用就OK，不用去了解它内部是什么样子组成。

2.面向对象的特点

抽象：抓住核心问题

封装：不用考虑内部实现过程，只要考虑功能的使用

继承：从已有对象，继承出新的对象

话不多说，直接上代码，下面就是我这个前端菜鸟用面向对象来给大家写一个tab栏。

<!DOCTYPE html>
<html>


	<head>
		<meta charset="UTF-8">
		<title>tab</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style: none;
			}
			
			a {
				text-decoration: none;
			}
			
			.box {
				width: 480px;
				height: 340px;
				border: 1px solid #666666;
				margin: 100px auto;
				border-radius: 10px;
				overflow: hidden;
			}
			
			.box .btnBox {
				width: 480px;
				height: 38px;
			}
			
			.box .btnBox a {
				float: left;
				width: 120px;
				height: 38px;
				text-align: center;
				line-height: 38px;
				color: #fff;
				background-color: rgba(33, 33, 33, .8);
			}
			
			.box .btnBox a:hover {
				background-color: rgba(180, 180, 180, .6);
			}
			
			.box .btnBox .btn {
				background-color: rgba(180, 180, 180, .6);
			}
			
			.box li {
				width: 480px;
				height: 300px;
				text-align: center;
				line-height: 300px;
				font-size: 30px;
				color: #fff;
				font-weight: bold;
				background-color: rgba(180, 180, 180, .6);
				display: none;
			}
			
			.box .active {
				display: block;
			}
		</style>
	</head>


	<body>
		<div class="box" id="box">
			<div class="btnBox">
				<a href="javascript:void(0);" class="btn">新闻</a>
				<a href="javascript:void(0);">体育</a>
				<a href="javascript:void(0);">娱乐</a>
				<a href="javascript:void(0);">八卦</a>
			</div>
			<ul id="list">
				<li class="active">新闻模块</li>
				<li>体育模块</li>
				<li>娱乐模块</li>
				<li>八卦模块</li>
			</ul>
		</div>
	</body>
	<script>
		function Tab(id) {	//构造函数  存放属性
			var obj = document.getElementById(id);
			this.aBtn = obj.getElementsByTagName('a');
			this.List = obj.getElementsByTagName('li');
		}
		Tab.prototype.init = function() {	
			var _this = this;
			for(var i = 0; i < this.aBtn.length; i++) {
				this.aBtn[i].index = i;
				this.aBtn[i].onclick = function() {
					_this.fnClick(this);
				}
			}
		}
		Tab.prototype.fnClick = function(allthis) {
			for(var j = 0; j < this.aBtn.length; j++) {
				this.aBtn[j].className = '';
				this.List[j].className = '';
			}
			allthis.className = 'btn';
			this.List[allthis.index].className = 'active';
		}
		var showtab = new Tab('box');
		showtab.init();
	</script>


</html>