面向对象写Tab栏切换

在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			.container {
				width: calc(100% - 500px);
				height: 400px;
				margin: 200px auto;
			}

			.container nav ul {
				list-style: none;
				/* width: 100%;
				border: 1px solid #333;
				height: 58px; */
			}

			.container nav ul li {
				float: left;
				border: 1px solid #333;
				padding: 15px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
				user-select: none;
			}

			.container nav ul li:hover {
				background-color: #CCCCCC;
			}

			.container main textarea {
				width: 100%;
				height: 340px;
				border: 1px solid #333;
				background: #CCCCCC;
				font-size: 20px;
			}

			.addition {
				display: inline-block;
				width: 30px;
				height: 30px;
				border: 1px solid #333;
				border-radius: 50%;
				text-align: center;
				font-size: 22px;
				line-height: 30px;
				margin: 10px 0 0 5px;
				cursor: pointer;
			}

			.addition:hover {
				background-color: #000000;
				color: #ffffff;
			}

			.bottom_border {
				border-bottom-style: none !important;
				background-color: #CCCCCC;
				color: #ffffff;
			}

			.isHidden {
				display: none;
			}

			.rem_icon {
				position: absolute;
				width: 0;
				height: 0;
				border-top: 20px solid transparent;
				border-bottom: 20px solid transparent;
				border-left: 30px solid #000000;
				border-radius: 50%;
				transform: translate(0, -30px) rotate(-40deg);
				text-align: left;
				color: #FFFFFF;
			}

			.rem_icon:after {
				content: '+';
				color: #ffffff;
				position: absolute;
				left: -30px;
				bottom: -13px;
			}

			.ipt {
				width: 100%;
				height: 20px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<nav>
				<ul>
					<li class="bottom_border">One<span class="rem_icon"></span></li>
					<li>Two<span class="rem_icon"></span></li>
					<li>Three<span class="rem_icon"></span></li>
				</ul>
				<span class="addition">+</span>
			</nav>
			<main>
				<textarea placeholder="One"></textarea>
				<textarea placeholder="Two" class="isHidden"></textarea>
				<textarea placeholder="Three" class="isHidden"></textarea>
			</main>
			<script type="text/javascript">
				var that;
				class Tab {
					constructor(element) {
						that = this;
						this.element = element;
						this.addBtn = this.element.querySelector('.addition');
						this.oUl = this.element.querySelector('ul');
						this.main = this.element.querySelector('main');
						this.init();
					}
					init() {
						this.upDateNode();
						this.oLi.forEach((li, index) => {
							li.index = index;
							li.onclick = this.taggleTab;
							this.rems[index].onclick = this.removeTab;
							li.ondblclick = this.editTab;
						});
						this.addBtn.onclick = this.additionTab;
					}
					upDateNode() {
						this.oLi = this.element.querySelectorAll('nav ul li');
						this.text = this.element.querySelectorAll('main textarea');
						this.rems = this.element.querySelectorAll('.rem_icon');

					}
					taggleTab() {
						that.clearTab();
						//tab切换
						this.className = 'bottom_border';
						//textarea切换
						that.text[this.index].className = ''
					}
					clearTab() {
						for (let i = 0; i < this.oLi.length; i++) {
							this.oLi[i].className = '';
							this.text[i].className = 'isHidden';
						}
					}
					additionTab() {
						//新写法 方便快捷 将指定的文本解析为 Element 元素，并将结果节点插入到DOM树中的指定位置
						that.oUl.insertAdjacentHTML('beforeend', '<li>newTab<span class="rem_icon"></span></li>');
						that.main.insertAdjacentHTML('beforeend', '<textarea placeholder="newTextarea" class="isHidden"></textarea>');

						that.init()
					}
					removeTab(e) {
						/*
						点击删除，
						默认第一个选中，删除第一个，选中第二个，删除其他正常删除，选中不切换
						选中的不是第一个，删除当前选中的，选中当前删除的前一个
							删除的不是选中的，正常删除，选中的不切换
						*/
						e.stopPropagation();
						let index = this.parentNode.index;
						this.parentNode.remove();
						that.text[index].remove();
						if (index == 0 && that.oLi[index].className == 'bottom_border') {
							index++
							that.oLi[index].click();
						} else if (index != 0 && that.oLi[index].className == 'bottom_border') {
							index--;
							that.oLi[index].click();
						}
					}
					editTab() {
						let val = this.innerHTML.split('<span class="rem_icon"></span>')[0];
						this.innerHTML = "<input class='ipt' type='text'>";
						that.edit = that.element.querySelectorAll('nav ul li input');
						that.edit[0].value = val;
						that.edit[0].select();
						that.edit[0].onblur = that.blur;
					}
					blur() {
						this.parentNode.innerHTML = this.value + '<span class="rem_icon"></span>';
					}
				}
				let con = document.querySelector('.container');
				let instance = new Tab(con);
			</script>
		</div>
	</body>
</html>
Hello Hongbin
发布了117 篇原创文章 · 获赞 146 · 访问量 2万+
私信关注
面向对象写Tab栏切换

猜你喜欢
