阅读量:3
要实现简单的选项卡功能，你可以使用JavaScript和HTML的结合。以下是一个简单的选项卡实现示例：
<!DOCTYPE html> <html> <head> <style> .tabcontent { display: none; } </style> </head> <body> <div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button> <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button> <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button> </div> <div id="tab1" class="tabcontent"> <h3>Content for Tab 1</h3> <p>This is the content for Tab 1.</p> </div> <div id="tab2" class="tabcontent"> <h3>Content for Tab 2</h3> <p>This is the content for Tab 2.</p> </div> <div id="tab3" class="tabcontent"> <h3>Content for Tab 3</h3> <p>This is the content for Tab 3.</p> </div> <script> function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " active"; } // 默认显示第一个选项卡 document.getElementById("tab1").style.display = "block"; document.getElementsByClassName("tablinks")[0].className += " active"; </script> </body> </html> 在上面的示例中，我们使用 tabcontent 类来隐藏所有的选项卡内容，然后使用 tablinks 类来处理点击事件。 openTab 函数会在点击选项卡按钮时被触发，它会根据点击的选项卡按钮显示相应的选项卡内容，并将点击的选项卡按钮设置为活动状态。最后，我们通过设置第一个选项卡为默认打开来初始化选项卡功能。
你可以根据需要修改选项卡的样式和内容。
