菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码：
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jS/CSS 选项卡 关闭按钮</title> </head> <body> <style> body {font-family:"Lato", sans-serif;} /* Style the tab */ div.tab {overflow:hidden;border:1px solid #ccc;background-color:#f1f1f1;} /* Style the buttons inside the tab */ div.tab button {background-color:inherit;float:left;border:none;outline:none;cursor:pointer;padding:14px 16px;transition:0.3s;font-size:17px;} /* Change background color of buttons on hover */ div.tab button:hover {background-color:#ddd;} /* Create an active/current tablink class */ div.tab button.active {background-color:#ccc;} /* Style the tab content */ .tabcontent {display:none;padding:6px 12px;-webkit-animation:fadeEffect 1s;animation:fadeEffect 1s;} /* Fade in tabs */ @-webkit-keyframes fadeEffect {from {opacity:0;} to {opacity:1;} } @keyframes fadeEffect {from {opacity:0;}to {opacity:1;}} </style> <h3>JS/CSS 选项卡 淡入效果</h3> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> <script> function openCity(evt, cityName) { 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(cityName).style.display = "block"; evt.currentTarget.className += " active"; } </script> </body> </html>
运行结果