如何将JavaScript表格切换插件改写为支持长尾关键词的交互式？

本文共计516个文字，预计阅读时间需要3分钟。

原文：本文字例为大师分享了JavaScript实现table切换插件的封装代码，供大家参考，具体内容如下+效果图：+HTML部分：+div class=box div id=tabBox ul li class=liStyle A/li liB/li liC/li /ul ol li class=liStyle /li /ol /div

本例展示如何用JavaScript封装table切换插件代码，供学习参考。具体内容如下，并附效果图：

HTML部分： A B C

本文实例为大家分享了JavaScript实现table切换插件的封装代码，供大家参考，具体内容如下

效果图：

HTML部分：

<div class="box"> <div id="tabBox"> <ul> <li class="liStyle">A</li> <li>B</li> <li>C</li> </ul> <ol> <li class="liStyle">A</li> <li>B</li> <li>C</li> </ol> </div> </div>

css部分：

#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构造函数部分：

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() // 使用class实现 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()

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。