首页html实现图文并茂

html实现图文并茂

时间: 2023-12-23 08:25:59 浏览: 172

以下是一个简单的HTML实现图文并茂的tab选项卡效果的例子： ```html <!DOCTYPE html> <html> <head> <title>Tab选项卡</title> <style type="text/css"> .tab { display: none; } .tab.active { display: block; } </style> </head> <body> <ul> <li><a href="#tab1">选项卡1</a></li> <li><a href="#tab2">选项卡2</a></li> <li><a href="#tab3">选项卡3</a></li> </ul> <div id="tab1" class="tab active"> <h2>选项卡1</h2> <p>这是选项卡1的内容。</p> </div> <div id="tab2" class="tab"> <h2>选项卡2</h2> <p>这是选项卡2的内容。</p> </div> <div id="tab3" class="tab"> <h2>选项卡3</h2> <p>这是选项卡3的内容。</p> </div> <script type="text/javascript"> var tabs = document.querySelectorAll('ul li a'); for (var i = 0; i < tabs.length; i++) { tabs[i].addEventListener('click', function(e) { e.preventDefault(); var tabId = this.getAttribute('href'); var tab = document.querySelector(tabId); var activeTab = document.querySelector('.tab.active'); activeTab.classList.remove('active'); tab.classList.add('active'); }); } </script> </body> </html> ```

阅读全文