超详细！HTML 实现选项卡式网站新闻动态栏目切换代码及注意要点

以下是一个简单的 HTML 代码示例，用于创建选项卡式的网站新闻动态栏目： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选项卡式新闻动态栏目</title> <style> /* 基本样式 */ * { box-sizing: border-box; } body { font-family: Arial, sans-serif; } /* 选项卡样式 */ .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } .tab button:hover { background-color: #ddd; } .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } </style> </head> <body> <div class="tab"> <button class="tablinks" onclick="openTab(event, 'News1')">新闻 1</button> <button class="tablinks" onclick="openTab(event, 'News2')">新闻 2</button> <button class="tablinks" onclick="openTab(event, 'News3')">新闻 3</button> </div> <div id="News1" class="tabcontent"> <h3>新闻 1 内容</h3> <p>这是新闻 1 的详细内容。</p> </div> <div id="News2" class="tabcontent"> <h3>新闻 2 内容</h3> <p>这是新闻 2 的详细内容。</p> </div> <div id="News3" class="tabcontent"> <h3>新闻 3 内容</h3> <p>这是新闻 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"; } </script> </body> </html> ``` 额外需要注意的逻辑点： 1. 可以根据实际需求修改每个选项卡的内容和样式。 2. 考虑添加交互效果，比如在切换选项卡时添加动画效果。 3. 确保代码在不同浏览器中的兼容性。 ######[AI写代码神器 | 831点数解答 | 2024-11-20 17:54:40]

服务商

更多选项

快捷项

自定义