class Father{
//父类
}
class son extends father{
//子类继承父类
}
示例:
// 1.类的继承
class Father{
constructor(){
}
money(){
console.log(100);
}
}
class Son extends Father{
}
let son = new Son()
son.money() //100
3.2 super关键字
super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数
示例:调用构造函数
class Father{
constructor(x,y){
this.x = x
this.y = y
}
sum(){
console.log(this.x + this.y)
}
}
class Son extends Father{
constructor(x,y){
// 这里不能访问父类的 this,父类的sum函数中的this是父类的,子类值没有传递进去
// this.x = x // 报错
// this.y = y // 报错
super(x,y);//调用父类中的构造函数
}
}
let son = new Son(1,2)
son.sum() // 3
示例:调用普通函数
// super调用父类的普通函数
class Father {
say() {
return ‘我是爸爸’
}
}
class Son extends Father {
say() {
//调用父类的普通方法
console.log(super.say()); //我是爸爸
}
}
let son = new Son()
3.3 继承方法的同时扩展方法
需求:继承父类的加法方法的同时,自己扩展一个减法方法。
注意事项:调用父类的函数时,super必须在子类this之前调用(父亲必须放在之前)
// 父类加法操作
class Father {
constructor(x, y) {
this.x = x
this.y = y
}
sum() {
console.log(this.x + this.y);
}
}
// 子类继承父类加法方法的同时扩展减法操作
class Son extends Father {
constructor(x, y) {
// 调用父类的构造函数 super必须在子类this之前调用(父亲必须放在之前)
super(x, y)
this.x = x
this.y = y
}
subtract() {
console.log(this.x - this.y);
}
}
let son = new Son(5, 3)
son.subtract() // 2
son.sum() // 8
功能描述:
-
点击Tab栏能实现切换
-
Tab栏和内容 点击右上角×号能删除当前栏目和内容
-
点击加号能实现增加Tab栏功能
-
双击Tab栏,可以编辑Tab栏名称
-
双击内容,可编辑内容
4.1 点击Tab栏能实现切换 Tab栏和内容
4.2 点击右上角×号能删除当前栏目和内容
4.3 点击加号能实现增加Tab栏效果
4.4 双击Tab栏,可以编辑Tab栏名称
4.5 双击内容,可编辑内容
4.6 细节方面:
-
删除一个栏目后默认选中前一个栏目
-
新增的栏目也能实现基本功能
-
当默认选中的是第一个,并且删除的时候,选中删除后的第一个
-
在编辑Tab名称的时候,回车键也能确认编辑
-
新增的栏目默认选中
样例获取:
-
下面有实例代码!
源码和教程来自b站pink老师,传送门
是不是太棒了,在21世纪是不是 很久没有遇到博主这样贴心的人才了吧! 那还愣着干什么,点赞关注走一波啊!
JS:tab.js
let that = null
class Tab {
constructor(id) {
// 1.获取元素
this.main = document.querySelector(id)
this.tabadd = this.main.querySelector(‘.tabadd’)
// li的父元素
this.ul = this.main.querySelector(‘.fisrstnav ul:first-child’)
// section福元素
this.fatherSection = this.main.querySelector(‘.tabscon’)
that = this
this.init()
}
// 初始化
init() {
this.updateNode();
// inti 初始化操作 让相关的元素绑定事件
for (let i = 0; i < this.lis.length; i++) {
this.lis[i].setAttribute(‘data-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.add
}
// 更新数据列表
updateNode() {
this.lis = this.main.querySelectorAll(‘li’)
this.sections = that.main.querySelectorAll(‘section’)
this.remove = this.main.querySelectorAll(‘.icon-guanbi’)
this.spans = this.main.querySelectorAll(‘.fisrstnav li span:nth-child(1)’)
console.log('this.spans: ', this.spans);
}
// 1.切换功能
toggleTab() {
that.clearClass()
this.className = ‘liactive’
that.sections[this.getAttribute(‘data-index’)].className = ‘conactive’
}
clearClass() {
for (let i = 0; i < this.lis.length; i++) {
this.lis[i].className = ‘’
this.sections[i].className = ‘’
}
}
// 2.添加
add() {
// 清除所有选中
that.clearClass()
// 1.创建 li元素和section元素
let random = Math.round(Math.random() * 100, 3)
let li = ‘
- Tab
- ’
let section = ‘
新内容’ + random + ‘ ’// 2.追加元素 使用 insertAdjacentHTML 支持字符串形式
that.ul.insertAdjacentHTML(‘beforeend’, li)
that.fatherSection.insertAdjacentHTML(‘beforeend’, section)
// 更新
that.init()
}
// 3.删除
removeTab(e) {
// 阻止时间冒泡 防止触发li的点击切换事件
e.stopPropagation();
let index = this.parentNode.getAttribute(‘data-index’)
// 根据索引号 删除对应li和section remove方法可以直接删除指定的元素
that.lis[index].remove()
that.sections[index].remove()
that.init()
// 当我们删除的不是选中状态的li的时候,原来的选定状态保持不变即可
// 该句核心思想,如果删除的是当前选中项,删除过后页面上没有 .liactive 进入判断,直接return 否则跳过
if (document.querySelector(‘.liactive’)) return;
// 当我们删除过后,设置默认选中其一个
index == 0 ? index = 0 : index–
that.lis[index] && that.lis[index].click()
}
// 4.编辑
editTab(e) {
// 双击禁止选中文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
let str = this.innerHTML;
console.log(this);
this.innerHTML = ‘’
let input = this.children[0]
input.value = str
input.select() //文本框内的文字处于选定状态
// 按下回车
input.addEventListener(‘keyup’, function (e) {
if (e.keyCode === 13) {
// 手动调用表单失去焦点事件
this.blur();
}
})
input.onblur = function () {
debugger
this.parentNode.innerHTML = this.value
}
}
}
#let tab = new Tab(‘#tab’);
HTML:index.html
面向对象 Tab Js 面向对象 动态添加标签页
- 测试1
- 测试2
- 测试3
+
测试1 测试2 测试3 CSS: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;
cursor: pointer;
user-select: none;
}
nav ul li.liactive {
#border-bottom: 2px solid #fff;
z-index: 9;
}
nav ul li.liactive span:first-child{
font-size: 18px;
font-weight: bold;
}
##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;
cursor: pointer;
}
.tabadd span {
display: block;
width: 20px;
height: 20px;
line-height: 20px;
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
0;display: inline-block;
height: 20px;
}
.tabadd {
position: absolute;
/* width: 100px; */
top: 0;
right: 0;
cursor: pointer;
}
.tabadd span {
display: block;
width: 20px;
height: 20px;
line-height: 20px;
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-FbRkz46t-1715528219262)]
[外链图片转存中…(img-ooDttebJ-1715528219262)]
[外链图片转存中…(img-pbl48kkF-1715528219263)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!