前端js-----选项卡/tab栏（面向对象）

最新推荐文章于 2021-07-18 18:17:32 发布

Lsx-codeShare

最新推荐文章于 2021-07-18 18:17:32 发布

阅读量519

点赞数 1

分类专栏： Web前端分享一下我的心得 JavaScript 文章标签： js javascript 前端

本文链接：https://blog.csdn.net/weixin_47339511/article/details/112462656

版权

分享一下我的心得同时被 3 个专栏收录

53 篇文章 0 订阅

订阅专栏

Web前端

35 篇文章 1 订阅

订阅专栏

JavaScript

24 篇文章 1 订阅

订阅专栏

功能效果如下：
在这里插入图片描述

实现代码：

HTML：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>面向对象 Tab</title>
		<link rel="stylesheet" href="./styles/tab.css">
		<link rel="stylesheet" href="./styles/style.css">
		<script src="1.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>

		<main>
			<h4>
				Js 面向对象 动态添加标签页
			</h4>
			<div class="tabsbox" id="tab">
				<!-- tab 标签 -->
				<nav class="fisrstnav">
					<ul>
						<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
						<li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
						<li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
					</ul>
					<div class="tabadd">
						<span>+</span>
					</div>
				</nav>

				<!-- tab 内容 -->
				<div class="tabscon">
					<section class="conactive">测试1</section>
					<section>测试2</section>
					<section>测试3</section>
				</div>
			</div>
		</main>
	</body>
</html>

CSS：
style.css

@font-face {font-family: "iconfont";
  src: url('./iconfont/iconfont.eot?t=1553960438096'); /* IE9 */
  src: url('./iconfont/iconfont.eot?t=1553960438096#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAK4AAsAAAAABmwAAAJrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAp4fwE2AiQDCAsGAAQgBYRtBzAbpQXIrrApw71oi3CCOyzEy8RvE4yIN8TD036/zp03qCYRjaJZNBFFS/gREoRGipQKofjuNrb+9XbTqrmXcqWzfTRDqFqWkhAJzYToaE6LQ7Q30CirRqSKMnj58DdIdrNAdhoTQJa5VGfLrtiAy+lPoAcZdUC57UljTR4TMAo4oL0xiqwYG8YueIHPCdTqYajty/t+bUpmrwvEnUK42lQhLMssVy1UNhzN4kmF6vSQVvMY/T5+HEU1SUXBbti7uBBrx++cgqJULp0GhAgBna5AgSkgE0eN6R1NwTitNt0yAI5VG7wr/8AljmoX7K+zq+tBF1Q8k9JTPWp1AjnJDgCzmM3bU0V31dsvV3M2eC6fHjaGfX/qS7U5Gr58vj6uD0bgxudyrV/OtHHyP+NZnpO1txbktjdY+3FB61+7nxeOzq8niGYnRwT3v3aZxeXf6rrNxl5//49WlEtZUUL1Pj3Bv1EO7MuG2namrCkbvcnApLUJtWpRhv2tzlRLx43kQ7WO2/FW6c5QqDZEZnYKFeosoVK1NdSa5E/XaVM1Ra7BhAEQmk0kjV5QaLbIzG5U6HRRqTkK1DqJtivrjMT1zJaNnIsihAiyQE3JdbszcW0Xiadzdl4d8UO0HSUGNDNXzl2hifYSO5pPjrorgdjUAAavoa5TKDZVUXD3kuuOOzh70fShvUiN2owtNsRxIREIIiATUCYpGO2aqXy/CxEeHcfuaKrLDiGbQ5kcEMsNIK8M5qCmR3mn8RFHOpcECBtlAAwWIZ2OAqV5kQoJXHvShORYBzrDZKhhb3uT8QPlrA3bmsKZV6i89DiTV2o1AAAA') format('woff2'),
  url('./iconfont/iconfont.woff?t=1553960438096') format('woff'),
  url('./iconfont/iconfont.ttf?t=1553960438096') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./iconfont/iconfont.svg?t=1553960438096#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-guanbi:before {
  content: "\e676";
}

tab.css:

* {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

main {
    width: 960px;
    height: 500px;
    border-radius: 10px;
    margin: 50px auto;
}

main h4 {
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.tabsbox {
    width: 900px;
    margin: 0 auto;
    height: 400px;
    border: 1px solid lightsalmon;
    position: relative;
}

nav ul {
    overflow: hidden;
}

nav ul li {
    float: left;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-right: 1px solid #ccc;
    position: relative;
}

nav ul li.liactive {
    border-bottom: 2px solid #fff;
    z-index: 9;
}

#tab input {
    width: 80%;
    height: 60%;
}

nav ul li span:last-child {
    position: absolute;
    user-select: none;
    font-size: 12px;
    top: -18px;
    right: 0;
    display: inline-block;
    height: 20px;
}

.tabadd {
    position: absolute;
    /* width: 100px; */
    top: 0;
    right: 0;
}

.tabadd span {
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #ccc;
    float: right;
    margin: 10px;
    user-select: none;
}

.tabscon {
    width: 100%;
    height: 300px;
    position: absolute;
    padding: 30px;
    top: 50px;
    left: 0px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
}

.tabscon section,
.tabscon section.conactive {
   display: none;
    width: 100%;
    height: 100%;
}

.tabscon section.conactive {
    display: block;
}

JS:

//1.点击tab栏，可以实现切换效果
//2.点击+号，可以添加tab项和内容项
//3.点击x号，可以删除tab项和内容项
//4.双击tab项文字或者内容选项文字，可以编辑里面的文字内容
//抽象对象（Tab对象）
//该对象具有切换功能；该对象具有添加功能；该对象具有删除功能；该对象具有修改功能
window.onload = function() {
	var that;
	class Tab {
		constructor(id) { //接收参数
			//获取元素
			//获取整个tab栏(最大盒子)
			//console.log(this);
			that = this;
			this.main = document.querySelector(id);

			this.tabadd = this.main.querySelector('.tabadd');
			this.ul = this.main.querySelector('.fisrstnav ul:first-child');
			this.tabscon = this.main.querySelector('.tabscon');
			this.init();
		}
		//初始化操作，让相关的元素绑定元素
		init() {
			this.updateNode();
			for (var i = 0; i < this.lis.length; i++) {
				this.lis[i].index = i;
				this.lis[i].onclick = this.toggleTab; //这里不需要加小括号
				this.remove[i].onclick = this.removeTab;
				this.spans[i].ondblclick = this.editTab;
				this.sections[i].ondblclick = this.editTab;
			}
			this.tabadd.onclick = this.addTab;
		}
		//获取所以的小li和 section
		updateNode() {
			this.lis = this.main.querySelectorAll('li');
			this.sections = this.main.querySelectorAll('section');
			this.remove = this.main.querySelectorAll('.icon-guanbi');
			this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');
		}
		//切换功能
		toggleTab() {
			//console.log(this.index);//这里的this指向函数的调用者,就是当前小li  lis[i]
			//为所以小li和section 清除类样式
			that.clearClass(); //这里面的this是当前的一个小li ，所以这里不能使用this调用
			this.className = 'liactive';
			that.sections[this.index].className = 'conactive';
		}
		//清除类样式
		clearClass() {
			for (var i = 0; i < this.lis.length; i++) {
				this.lis[i].className = '';
				that.sections[i].className = '';
			}
		}
		//添加功能
		addTab() {
			//点击+号 可以实现添加新的选项卡和内容
			//1.创建新的选项卡li和新的内容section
			//2.把创建的两个元素追加到对应的父元素中
			//以前的做法：动态创建元素createElement，但是元素里面内容较多，需要
			//innerHTML赋值，在appendChild追加到父元素里面
			//现在的高级做法：利用insertAdjacentHTML（）可以直接把字符串格式元素添加到父元素中
			//appendChild不支持追加字符串的子元素，insertAdjacentHTML支持追加字符串的元素
			var random = Math.random();
			that.clearClass();
			var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
			var section = '<section class="conactive">测试' + random + '</section>';
			//因为是tabadd这个按钮调用的这个方法，所以this为这个按钮
			that.ul.insertAdjacentHTML('beforeend', li);
			that.tabscon.insertAdjacentHTML('beforeend', section);
			that.init();
		}
		//删除功能
		removeTab(e) {
			//点击X号可以删除当前的li选项卡和当前的section
			//X是没有索引号的，但是它的父亲li有索引号，
			//点击X号可以删除这个索引号对应的li和section
			var index = this.parentNode.index;
			//console.log(index);
			//因为X号和小li都有点击事件，会有冒泡,所以要阻止冒泡,这样就不会触发li的点击事件
			e.stopPropagation();
			//根据相应索引号删除li和section,remove（）方法可以直接删除指定的元素
			that.lis[index].remove();
			that.sections[index].remove();
			that.init(); //重新获取删除完之后剩下 的小li和section

			//当删除的不是选中状态的小li的时候，原来选中状态的小li保持不变
			if (document.querySelector('.liactive')) {
				return; //如果进入if语句的话，return后面的代码将不会执行!!!!!!!
				//如果是删除选中状态的小li，则这个选中状态的小li没有.liactive样式
			}
			//当删除了选的状态的li的时候，让他前一个li处于选定状态,其实就是让前面的li为点击状态
			index--;
			//手动调用点击事件，不需要鼠标触发,但是当index等于0的时候再删会报错
			//当index==-1时就找不到这个索引的小li了
			that.lis[index] && that.lis[index].click();

		}
		//修改功能
		editTab() {
			var str = this.innerHTML;
			//双击选项卡li或者section里面的文字可以实现修改操作
			//如果双击文字，默认会选定文字，此时需要双击禁止选中文字
			window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
			this.innerHTML = '<input type="text" />';
			var input = this.children[0];
			input.value = str;
			input.select(); //让文本框里面的文字处于选定状态
			//当文本框失去焦点是，就把文本框内的值给span
			input.onblur = function() {
				this.parentNode.innerHTML = this.value;
			}
			//按下回车也可以把文本框的值给span
			input.onkeyup = function(e) {
				if (e.keyCode === 13) {
					//this.blur();
					this.parentNode.innerHTML = this.value;
				}
			}
		}
	}
	new Tab('#tab');
}

Lsx-codeShare

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端js-----选项卡/tab栏（面向对象）

功能效果如下：实现代码：HTML：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &
复制链接

扫一扫