首页根据上面写一个tab页

根据上面写一个tab页

时间: 2023-10-11 16:06:09 浏览: 38

<!DOCTYPE html> <html> <head> <title>Tab页示例</title> <style type="text/css"> .tab { display: none; } .active { display: block; } .tab-btn { cursor: pointer; border: none; background-color: transparent; padding: 10px; font-size: 18px; font-weight: bold; color: #333; } .tab-btn.active { color: #f00; border-bottom: 2px solid #f00; } </style> </head> <body> <div> <button class="tab-btn active" onclick="showTab(1)">Tab 1</button> <button class="tab-btn" onclick="showTab(2)">Tab 2</button> <button class="tab-btn" onclick="showTab(3)">Tab 3</button> </div> <div class="tab active" id="tab1"> <h2>Tab 1 内容</h2> <p>这是第一个tab页的内容。</p> </div> <div class="tab" id="tab2"> <h2>Tab 2 内容</h2> <p>这是第二个tab页的内容。</p> </div> <div class="tab" id="tab3"> <h2>Tab 3 内容</h2> <p>这是第三个tab页的内容。</p> </div> <script type="text/javascript"> function showTab(tabIndex) { // 隐藏所有tab页 var tabs = document.getElementsByClassName("tab"); for (var i = 0; i < tabs.length; i++) { tabs[i].classList.remove("active"); } // 显示指定的tab页 var tab = document.getElementById("tab" + tabIndex); tab.classList.add("active"); // 切换按钮样式 var btns = document.getElementsByClassName("tab-btn"); for (var i = 0; i < btns.length; i++) { btns[i].classList.remove("active"); } var btn = document.getElementsByClassName("tab-btn")[tabIndex - 1]; btn.classList.add("active"); } </script> </body> </html>