How to implement plug-in Encapsulation of table switching in JavaScript
This article mainly introduces JavaScript how to achieve table switching plug-in encapsulation, the article introduces in great detail, has a certain reference value, interested friends must read it!
Effect picture:
HTML section:
A B C A B C
Css section:
# tabBox {width: 600px; height: 450px; border: 3px solid # 333;} # tabBox > ul {width: 100%; height: 50px; display: flex; justify-content: center; align-items: center;} # tabBox > ul > li {flex: 1 Height: 100%; display: flex; justify-content: center; align-items: center; color: # fff; background-color: skyblue; font-size: 30px;} # tabBox > ul .liStyle {background-color: lime;} ol {flex: 1 Width: 600px; height: 400px;} ol > li {width: 100%; height: 100%; background-color: # ccc; color: # fff; font-size: 100px; display: none; justify-content: center; align-items: center } ol > li.liStyle {display: flex;}
JavaScript constructor section:
Function fn15 () {function TabBox (tabbox) {this.tabbox = tabbox This.tabs = tabbox.querySelectorAll ("ul > li") this.contents = tabbox.querySelectorAll ("ol > li")} TabBox.prototype.startSwitch = function () {const tb = this tb.tabs.forEach (function (tab) Index) {tab.onclick = function (e) {tb.tabs.forEach (function (tab) {tab.classList.remove ("liStyle")} ) tb.contents.forEach (function (con) {con.classList.remove ("liStyle")}) Tab.classList.add ("liStyle") tb.contents [index] .classList.add ("liStyle")}} const tabBox = document.querySelector ("# tabBox") const tb = new TabBox (tabBox) Tb.startSwitch ()} / / fn15 () / / use class to implement function fn16 () {class TabBox {constructor (tabbox) {this.tabbox = tabbox This.tabs = tabbox.querySelectorAll ("ul > li") this.contents = tabbox.querySelectorAll ("ol > li")} startSwitch () {const tb = this tb.tabs.forEach (function (tab) Index) {tab.onclick = function (e) {tb.tabs.forEach (function (tab) {tab.classList.remove ("liStyle") }) tb.contents.forEach (function (con) {con.classList.remove ("liStyle")} ) tab.classList.add ("liStyle") tb.contents [index] .classList.add ("liStyle")})} } const tabBox = document.querySelector ("# tabBox") const tb = new TabBox (tabBox) tb.startSwitch ()} fn16 () above are all the contents of the article "how to implement plug-in encapsulation for table switching in JavaScript" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
