';
// add elements
that.liParentUl.insertAdjacentHTML("beforeend", li);
that.sectionParentDiv.insertAdjacentHTML("beforeend", section);
// There are two bugs here
// After clicking add, the newly added label has no switching effect
// Because the li and section elements are obtained first, there are no new elements in the elements obtained after adding, so there is no effect
// The solution is to update the acquisition of the element and bind the event-write a method to update the element
that.init();
}
// delete node function
removeTab(e) {
// this points to the x number
// First remove the switching function when clicking, you only need to delete the label and the tab page does not need to switch effects
e.stopPropagation(); // Prevent the event from bubbling to prevent the occurrence of the span’s parent element li click event
// Get the index of the current parent element li of x, delete the corresponding li and section
var index = this.parentNode.index;
console.log(index);
that.tabLis[index].remove();
that.tabSections[index].remove();
that.init(); // Because the delete operation is implemented, we need to reinitialize the binding event
// There is a bug here,
// First: When we delete the selected label, there is no selected label
// Second: The selected label is the first item, and the first item is to be deleted at the same time. There is no selected label at this time
// Third: When deleting unselected tags, the selected tags remain unchanged
// Solution 3: When selected, keep unchanged and return empty
if (document.querySelector(".liactive")) return;
// Solution 2: The item after the first item is selected
if (index == 0) {
that.tabLis[0].click();
}
// Solution 1: The effect we want here is that when the selected li is deleted, the previous item of the deleted li is selected
index--;
// Logic short-circuit application, execute click() event when the previous label exists, manually call li click event
that.tabLis[index] && that.tabLis[index].click();
}
// modify function
exidTabContent() {
// this points to the first span tag in li
var str = this.innerHTML;
// console.log(str);
this.innerHTML = '';
var input = this.children[0];
input.value = str;
input.select(); // Do not select form text
// When the focus is lost, change the content and the form disappears
input.addEventListener("blur", function () {
this.parentNode.innerHTML = this.value;
})
// Press enter to change the content
input.addEventListener("keyup", function (e) {
if (e.keyCode === 13) {
// this.parentNode.innerHTML = this.value;
this.blur();
}
})
}
}
var tab = new Tab("#tab");
}