代码如下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <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;*/ /*border: 1px solid #ccc;*/ /*border-top: none;*/ /*}*/ /* 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> <body> <p>点击各个选项卡查看内容:</p> <div class="tab"> <button id="defaultOpen" 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> </body> </html> <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; //所有tab-content移除block效果，tab-links先移除active。 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", ""); } //根据字符串把对应的tab-content和tab-links加上效果。 document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; // tabcontent[i].style.display = "none"; } // 触发 id="defaultOpen" click 事件,默认让第I一个tabcontent显示。 document.getElementById("defaultOpen").click(); // var tabcontent = document.getElementsByClassName("tabcontent"); // tabcontent[0].style.display = "block"; // // var tablinks = document.getElementsByClassName("tablinks"); // tablinks[0].className += " active"; </script>
二.淡入弹出效果
如果要淡入弹出的动画效果。则把上面的tabcontent样式加上animation属性。并加上动画的效果fadeEffect定义。
/* 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;}
}